如何在元素的点击时将 id 从一个组件传递到另一个组件

Question

我试图将它作为 id 作为道具传递给另一个不是该组件的子组件的组件。我正在考虑使用上下文，但我想知道是否有另一种方法，因为我对反应很陌生，我正在寻找一种更有效的方法。

这是生成被点击元素 id 的组件。当我记录它时，数据是正确的，没有通知任何问题。我首先尝试将它作为道具传递，如下所示，但由于我不希望在该页面上看到它，我没有将它传递给主 return 语句，我也没有在其中调用该方法，但随后它返回 undefined in我想使用它的组件

import React, { useState } from 'react'
import { useHistory } from 'react-router-dom';
import Workspacelist from '../Workspace/Workspacelist';

function BoardList({ boards }) {
    const [currentid, setcurrentid] = useState('')
    const history = useHistory()

    const navigate = (id) => {
        setcurrentid(id);
        console.log(id)
        history.push(`/workspace/${id}`)
        return(
            <Workspacelist id = {id}/>
        )
    }
    return (
        <>
            {
                boards.map((board) => (
                    <li key={board.id} className="boardlist" style={styles} onClick={() => navigate(board.id)}>
                        <h3>{board.title}</h3>
                    </li>
                ))}
        </>
    )
}
export default BoardList

PS：Firebase 正在被纳入这个项目，我想这可能是我第一次使用 firebase 的原因，所以我可能遗漏了一些东西，因为所有数据都来自服务器

这是我想要传递给它的组件

import React, { useState, useEffect } from 'react'
import Firebase, { db } from '../Firebase/Firebase';
import { Todo } from './List';


function Workspacelist({ id }) {
    const [updatedId] = useState(id)

    const [show, setshow] = useState(false);


    const [Todos, setTodos] = useState([]);//Todolist
    const [ToDo, setToDo] = useState('');

     useEffect(() => {
         const docRef = db.collection("boards").doc(updatedId).get().then(doc => {
             if (doc.exists) {
                 setTodos(doc.data().todo);
                 console.log("Document data:", doc.data().todo);
             } else {
                 console.log("No such document!");
             }
         }).catch(function (error) {
             console.log("Error getting document:", error);
         });
         return docRef
     })


    return (
        <div className="workspacelist">
            <div className="todo">
                <div>
                    <b>To Do</b>
                    <b>...</b>
                    <Todo Todos={Todos} />
                    <span onClick={() => { setshow(current => !current) }} style={{ display: show ? 'none' : 'block' }}>+ Add a card</span>
                </div>
                <div className="add" style={{ display: show ? 'block' : 'none' }}>
                    <textarea placeholder="Enter a title for this card..." value={ToDo} onChange={(e) => { setToDo(e.target.value) }} />
                    <button className="addcard" onClick={one}>Add Card</button>
                    <button onClick={() => { setshow(current => !current) }}>X</button>
                    <button className="more">...</button>
                </div>
            </div>
        </div>
    )
}

export default Workspacelist

提前谢谢你的帮助，即使我必须重写它，只要告诉我，如果你在我的鞋子里，你会怎么做

Answer 1

要导航到另一个页面，您只需要history.push(/workspace/${id})。

这里甚至不需要任何状态。

import React, { useState } from 'react'
import { useHistory } from 'react-router-dom';
import Workspacelist from '../Workspace/Workspacelist';

function BoardList({ boards }) {
    const history = useHistory()

    const navigate = (id) => {
        history.push(`/workspace/${id}`)
    }
    return (
        <>
            {
                boards.map((board) => (
                    <li key={board.id} className="boardlist" style={styles} onClick={() => navigate(board.id)}>
                        <h3>{board.title}</h3>
                    </li>
                ))}
        </>
    )
}
export default BoardList

要在 Workspace 页面上获取 id 参数，您需要使用 react-router-dom 中的 useRouteMatch 钩子：

import { useRouteMatch } from 'react-router-dom';

function Workspacelist() {
   const {
    params: { id },
  } = useRouteMatch('/workspace/:id');

  console.log(id)
}

如果它解决了你的问题，请告诉我。

Answer 2

如果您使用 dom 版本 6，请更改@HichamELBSI 答案中显示的以下部分。

• useHistory 应更改为 useNavigate。
• useRouteMatch 应更改为 useMatch。

应用这些后，代码应该是

import { useNavigate} from 'react-router-dom';

const nav = useNavigate();

const navigate = (id) => {
    nav(`/workspace/${id}`)
}

那么其他部分应该是

import { useMatch } from 'react-router-dom';

function Workspacelist() {
   const {
    params: { id },
  } = useMatch('/workspace/:id');

  console.log(id)
}