Reactjs 当链接位于组件内部时,如何更改页面内容?

Reactjs 当链接位于组件内部时,如何更改页面内容?,reactjs,react-router,Reactjs,React Router,如果我感到困惑,请提前道歉,因为我是 因此,从我的App.js文件,它就像主文件一样,我调用所有组件并查询我的数据库,然后由index.js文件调用 这是我的渲染方法 render() { return ( <div className="site" > { !!!this.state.done ? ( <LoadingSVG />

如果我感到困惑,请提前道歉,因为我是

因此,从我的App.js文件,它就像主文件一样,我调用所有组件并查询我的数据库,然后由index.js文件调用

这是我的渲染方法

render() {
    return (
        <div className="site" >
            {
                !!!this.state.done ? (
                    <LoadingSVG />
                ) : (
                        <div className="page">
                            <div className="header-wrapper">
                                <Header data={this.state.dataHeader} />
                            </div>
                            <div className="project-list-wrapper">
                                <ProjectList data={this.state.dataProjects} />
                            </div>
                        </div>
                    )
            }
        </div >
    )
}
render(){
返回(
{
!!!这个。状态。完成了吗(
) : (
)
}
)
}
在Projectlist组件中,我循环遍历每个项并创建一个项目

    render() {
    return (
        <div className="project-list module">

            <div className="sectionTitle">Project I've worked on</div>

            {this.props.data.map((res, i) => (
                <div className="project-wrapper">
                    <div className="inner-ctn">
                        <div className="header">
                            <div className="number">0{res.id + 1}</div>
                            <div className="name">{res.nomProjet}</div>
                        </div>
                        <div className="item-ctn">
                            <div className="categ">{res.categProjet}</div>
                            <div className="roles">{res.roles}</div>
                            <div className="date">{res.date}</div>
                        </div>

                    </div>
                </div>
            ))
            }
        </div>
    );
}
render(){
返回(
我参与的项目
{this.props.data.map((res,i)=>(
0{res.id+1}
{res.nomProjet}
{res.categProjet}
{res.roles}
{res.date}
))
}
);
}
我想做的是使用转换组,渲染另一个组件。。让我们称之为项目1。项目1将刷新我的App.js内容,以便新组件能够呈现。但我不能这么做,因为App.js是ProjectList的父级。我还想保留一个结构良好的项目,所以我不想将所有内容都放在一个文件中


我试着阅读文档和基本上每一篇关于如何做到这一点的文章,但我似乎无法完全理解这应该如何工作。这应该很简单,但在两个页面之间进行转换甚至链接却非常复杂。

似乎您想向子组件传递一个对父组件状态有影响的道具?基本上,但是这是可能的,我想更改头组件数据,使其成为项目数据。是的,您可以在父组件上创建一个函数(或方法),并将其传递给子组件。