Question

对不起，如果我看起来很困惑，那是因为我在。

因此，从我的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 >
    )
}

在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>
    );
}

我想做的是使用过渡组，渲染另一个组件。我们称之为Project-1。项目1将刷新我的App.js内容，以便呈现新组件。但是我不能这样做，因为App.js是ProjectList的父级。我也想保留一个结构良好的项目，所以我不想将所有内容都放在一个文件中。

我尝试阅读文档以及基本上每一篇有关如何执行此操作的文章，但似乎无法确定该如何工作。这应该很简单，但是在两个页面之间进行转换甚至是链接都非常复杂。

当链接位于组件内部时，如何更改页面的内容？

0 个答案: