Reactjs 当链接位于组件内部时,如何更改页面内容?
如果我感到困惑,请提前道歉,因为我是 因此,从我的App.js文件,它就像主文件一样,我调用所有组件并查询我的数据库,然后由index.js文件调用 这是我的渲染方法Reactjs 当链接位于组件内部时,如何更改页面内容?,reactjs,react-router,Reactjs,React Router,如果我感到困惑,请提前道歉,因为我是 因此,从我的App.js文件,它就像主文件一样,我调用所有组件并查询我的数据库,然后由index.js文件调用 这是我的渲染方法 render() { return ( <div className="site" > { !!!this.state.done ? ( <LoadingSVG />
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的父级。我还想保留一个结构良好的项目,所以我不想将所有内容都放在一个文件中
我试着阅读文档和基本上每一篇关于如何做到这一点的文章,但我似乎无法完全理解这应该如何工作。这应该很简单,但在两个页面之间进行转换甚至链接却非常复杂。似乎您想向子组件传递一个对父组件状态有影响的道具?基本上,但是这是可能的,我想更改头组件数据,使其成为项目数据。是的,您可以在父组件上创建一个函数(或方法),并将其传递给子组件。