將道具傳遞給其他組件ReactJS

Question

我的index.js具有以下結構：

ReactDOM.render(
  <React.Fragment>
      <Header />    
      <App />
      <Footer />
  </React.Fragment>,
  document.getElementById("root")
);

我的App.js看起來像這樣：

class App extends Component {
    render() {
        return(
            <Router>
                <React.Fragment>
                    <Route exact path='/' component={Main} />
                    <Route path="/login" component={Login} />
                    // ... etc
                </React.Fragment>
            </Router>
        );
    }
}

export default App;

問題是我想根據App組件中顯示的組件來不同地渲染Footer 。 那就是如果渲染了Main組件，我想在Footer添加一些其他內容，因為其他任何組件的頁腳均未更改。 有什么辦法嗎？ 我想傳遞一個prop並基於它渲染頁腳，但是如何通過這樣的結構傳遞它呢？ 也許我需要重新組織代碼以實現這一目標？ 謝謝。

Answer 1

您應該將相同的屬性從父組件傳遞給Footer和App 。 因此，最好將這兩個包裝在另一個組件中。

例：

class Header extends React.Component {
  render() {
    return <div>HEADER</div>;
  }
}

class App extends React.Component {
  render() {
    return <div>APP: {this.props.name}</div>
  }
}

class Footer extends React.Component {
  render() {
    return this.props.color === 'test' ? <div>FOOTER TEST</div> : <div>FOOTER NOT TEST</div>;
  }
}

class Main extends React.Component {
  render() {
    return <React.Fragment>
        <Header />    
        <App {...this.props} />
        <Footer {...this.props} />
      </React.Fragment>;
  }
}

ReactDOM.render(
  <Main name="test"></Main>,
  document.getElementById("root")
);

Answer 2

如果將<Footer />元素放在“ routes-provider”中，則可以從頁腳中訪問當前路由，然后可以定義定義。

就像是：

componentDidMount() {
  let path = this.props.location.pathname
  this.setState({path})
}

render() {
  if (this.state.path === '/main') {
    return <div>main</div>
  } else {
    return <div>not main</div>
  }
}

另一種可能性是將您的應用程序和頁腳包裝到“高階組件”中，並將相關的道具傳遞給他們。