如何将 id 从一个组件传递到另一个组件 onclick 元素

Question

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

这是正在生成单击元素的 id 的组件。 当我记录它时，数据是正确的，没有通知任何问题。 我首先尝试将它作为道具传递，如下所示，但由于我不想在该页面上看到它，我没有将它传递给主返回语句，我也没有在其中调用方法，但随后它返回 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} ) 。

你甚至不需要任何 state 这里。

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)
}