javascript - 如何通过 ReactJS 中的函数将数据从一个组件传递到另一个组件？

Question

如何将数据参数从 openTeam 函数传递到另一个文件中的另一个组件？数据不能改变值，因为它有一个不能改变的 id。我在我的应用程序中使用功能组件。

const openTeam = (data) => {
        history.push("/" + data.name)
        return (
            <div>

            </div>
        )
    }

    return (
        <div>
            <Welcome />
            <div>
                <ul>
                    {teams.map((data) => {
                        return (
                            <li onClick={() => openTeam(data)} key={data.teamId}>
                                <h1>{data.name}</h1>
                                <p>{data.teamId}</p>
                            </li>
                        )
                        })}
                </ul>
            </div>
        </div>
    )
}

标签： javascriptreactjscomponents

Answer 1

您可以将这样的数据传递给导航组件

const openTeam = (data) => {
    this.props.history.push({
      pathname: '/',
      state: { passedData: data }
    })
}

并像这样访问

this.props.location.state.passedData

或或类似的Link组件

<Link to={{
   pathname: '/',
   state: {passedData: data}
 }}> {data.name} </Link>