在多个页面上反应状态

Question

我想建立一个投资组合页面的反应，将有不同的网页(简历，新闻，作品)，他们将是不同的组成部分。

让我烦恼的是，像这样的设置，我不能将"App.js“作为”妈妈组件“，因为所有组件都在不同的url中，而且它们至少有一个不同的组件。例如，我的课程内容：

import React from 'react';
import Header from './Header';

class Curriculum extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <article className="curriculum">
          <div className="curriculum-text">
            <ul>
              <li>
                2022
                <ul>
                  <li>Participating in ..........</li>
                  <li>Released my co-authored article "Three Ways of .....</li>
                </ul>
              </li>
              <li>
                2021
                <ul>
                  <li>
                    Starting to work at the ..........
                    <ul>
                      <li>Working on the ......</li>
                      <li>Assisting to ......</li>
                      <li>Reviewing and drafting contracts</li>
                    </ul>
                  </li>
                  <li>Participating IRIS conference with my paper titled "...." ......</li>
                </ul>
              </li>
              <li>
                2020
                <li></li>
              </li>
            </ul>
          </div>
        </article>
      </React.Fragment>
    );
  }
}

export default Curriculum;

我的新闻部分：

import React, { Fragment } from 'react';
import Header from './Header';

class News extends React.Component {
  goToNews = (event) => {
    event.preventDefault();
    const currentNews = event.target.parentElement.id;
    this.props.history.push(`/news/${currentNews}`);
    console.log(this.props);
  };

  render() {
    return (
      <React.Fragment>
        <Header />
        <article className="news">
          <div className="news-text">
            <h2>News from the World </h2>
            <div id="news1" value="news1" onClick={this.goToNews}>
              <h3>News1</h3>
            </div>
            <div id="news2" value="news2" onClick={this.goToNews}>
              <h3>News2</h3>
            </div>
            <div id="news3" value="news3" onClick={this.goToNews}>
              <h3>News3</h3>
            </div>
          </div>
        </article>
      </React.Fragment>
    );
  }
}

export default News;

我尝试将我的Router.js转换为App，如下所示：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Introduction from './Introduction';
import Curriculum from './Curriculum';
import Works from './Works';
import News from './News';
import CurrentNews from './CurrentNews';
import NotFound from './NotFound';

class App extends React.Component {
  yellAtMe = (fish) => {
    console.log('heeeeeeeeeeeeeeeeeee');
  };

  render() {
    return (
      <Router yellAtMe={this.yellAtMe}>
        <Switch yellAtMe={this.yellAtMe}>
          <Route exact path="/" component={Introduction} />
          <Route exact path="/curriculum" component={Curriculum} />
          <Route yellAtMe={this.yellAtMe} exact path="/works" component={Works} />
          <Route exact path="/news" component={News} />
          <Route path="/news/:newsId" component={CurrentNews} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    );
  }
}

export default App;

然而，我不能通过路由，开关和路由器道具到组件(至少我没有成功)。我的问题是：

是否允许

• 为每个组件设置更多的状态？(这与韦斯·博斯( Wes )的建议相矛盾，根据他的建议，国家应该成为“唯一的真相来源”)
• 有没有办法让道具通过路由器组件？(或者，您认为我将其转换为adequate)
• Should的解决方案是App.js，我不知怎么地将所有组件放在一个大组件中？(因此，结果会是这样的：)-然后如何使每个页面具有不同的url?)

。

<App />
<Header />
<Always-change-component />
<CV />
<News />
<Works />

提前感谢！

Answer 1

“允许我为每个组件设置更多的状态吗？(这与Wes Boss的建议相矛盾，根据Wes Boss的建议，状态应该是”真理的单一来源“)”--您可以为每个组件创建状态，但在这种状态下，您应该只保留与此组件相关和使用的内部信息，以及您应该通过父组件传递的所有公共信息。

“有没有办法通过路由器组件传递道具？(或者您认为我将其转换为App.js的解决方案足够了)”--您应该将共享信息保存在父组件中，只需像这样重写路由结构：

<Router>
    <Switch>
       <Route exact path="/">
         <Introduction yellAtMe={this.yellAtMe}/>
       <Route />     
       ....
    </Switch>
</Router>

我应该以某种方式把我的所有组件放在一个大组件中吗？(因此，结果会是这样的：)