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;

问题是我想根据Footer组件中显示的组件来不同地渲染App 。也就是说，如果呈现了Footer组件，我想向我的Main添加一些其他内容，因为其他任何组件页脚均未更改。有什么办法吗？我想传递一个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>
  }
}

另一种可能性是将您的应用程序和页脚包装到“高阶组件”中，并将相关的道具传递给他们。

将道具传递给其他组件ReactJS

2 个答案: