Question

我试图通过单击按钮将整个对象从一个组件传递到另一个组件。

我尝试使用链接和路由器，但是仍然看不到目标组件的道具内部的对象。

我正在使用onClick处理程序handleReportIncident在路由到此组件时传递可用的对象。 handleReportIncident函数绑定在顶部。

    handleReportIncident() {
        const { trip } = this.state;
        this.props.history.push(`/app/new`)
        return (
            <div>
                <New trip={trip} />
            </div>
        )
    }

    render() {

        return (

                    <Button
                        variant="contained"
                        color="primary"
                        className={classes.toolbarButton}
                        onClick={this.handleReportIncident}
                    >
                        <AddIcon />
                        Incident
        </ Button>
)}

在“新组件”内部：

class New extends Component {
render() {
const {trip} = this.props;
console.log("the trip is", trip);
return(
...
)
}
New.propTypes = {
    trip: PropTypes.object.isRequired,
};

注意：我正在使用材质UI作为主题。

“新”组件中的日志是undefined。

Answer 1

您可以在链接状态下包装所需的对象。参见下面的示例。

//您要从中传递对象的主要组件

render() {

  return (
    <Link to = {{
      pathname: '/app/new',
      state: {
        trip: this.state.trip
      }
    }}>
      <AddIcon /> Incident 
    </Link>
  )
}

//新组件从this.props.location.state获取所需对象

class New extends Component {
render() {
const { trip } = this.props.location.state
console.log("the trip is", trip);
return(
...
)
}
New.propTypes = {
    trip: PropTypes.object.isRequired,
}

有关其工作原理的更多信息，请转到本教程：https://tylermcginnis.com/react-router-pass-props-to-link/

使用道具将对象从一个组件传递到另一个组件

1 个答案: