将组件之间的数据传递给 React (props)

Question

进入DisplayVisit component我已经显示数据：

<div>
{(this.state.allVisit.length > 0) ? this.state.allVisit.map(data => {

    return (
        <div key={data.id} className="card-header mb-2" style={{ background: "#F0F3F7" }}>
            <div className="form-group">
                <label><b>VisitName:</b> {data.dataContext.VisitName} &nbsp;</label>
             </div>                                                     
                                                    
            <div className="form-group">
                <Link to={`/visit/${data.id}`} className="btn btn-secondary btn-sm" >
                    <i className="fas fa-arrow-circle-right" /> Details
                </Link>
            </div>
        </div>
    )
    }) : (
        <div className="card-header p-3 mb-2 text-black">
            <label><b>Empty</b></label>
        </div>
     )
}

</div>

当用户单击 详细信息 时，移动到下一个组件 VisitDetails - 这是有效的。

App.js

<Route exact path="/visit/:id" component={VisitDetails}/>

然后我想访问 id 和 data.dataContext:

class VisitDetails extends Component {

    render() {

        const { id } = this.props;
        const { data.dataContext } = this.props;
        //or const {data} = this.prop

        return (
            <div>
                {id}, {data.dataContext.VisitName}
            </div>
        )
    }
}

但我做错了什么。我只是在学习并尝试开发第一个应用程序。

Answer 1

在您的 DetailVisit 组件中：

<Link to={{ pathname: `/visit/${data.id}`, state: { data: data.dataContext.VisitName} }} className="btn btn-secondary btn-sm">
   <i className="fas fa-arrow-circle-right" /> Details
</Link>

在你的 VisitDetails.js 中：

class VisitDetails extends Component {

    render() {

        const { id } = this.props.match.params;
        const { data } = this.props.location.state;

        return (
            <div>
                {id}, {data}
            </div>
        )
    }
}

将组件之间的数据传递给 React (props)

Passing data between components into React (props)

parameter-passing

prop

reactjs

react-router

react-props