我如何通过道具将一个组件传递给另一个组件

Question

我有这样一种情况，我的 Web 应用程序会有一个 header 和 3 个选项。根据所选的选项，header 将 re-rendered 包含新选项。由于我是 React 的新手，我对代码结构的直接想法是有一个空的主 Header.js 文件，该文件将呈现页面选项独有的另一个组件。但是，我的谷歌搜索没有 return 任何可以帮助我了解如何通过 react-router v4.

将组件传递给另一个的搜索

一个例子： Header: 牛排 |意大利面 |汉堡

如果用户选择牛排，同样的 header 现在将显示以下内容： Header: Black-Pepper |蘑菇 |辣椒

header 的内容应该根据用户之前选择的内容而改变

谢谢你，我希望我不会被打分，因为我真的不知道还有什么可以问这个问题。

Answer 1

有几种方法可以解决这个问题，但如果不深入了解您的项目，您可以使用以下通用方法：

（您可以创建功能组件并使用它们，或者只在 Header 组件中编写所有 JSX。）

Header component extends React.Component {

state= {
         selected: "burger"
       }

// Create a method for each: "burger", "steak" etc...
this.setBurgerMenu = () => {
  this.setState({selected: "burger"}, () => {})
}

render() {
  return (
    <div>
      <button onClick={this.setBurgerMenu}>Burger</button>
      <button onClick={this.setSteakMenu}>Steak</buttton>
      <button onClick={this.setChiliMenu}>Chili</button>
      <div>
        {this.state.selected === "burger" && <BurgerMenu />}
        {this.state.selected === "steak" && <SteakMenu />}
        {this.state.selected === "chili" && <ChiliMenu />}
      <div>
    </div>
  )
 }
}

如果您正在制作导航栏并且这些菜单项只是指向 link，那么最简单的解决方案是使用带有菜单和子菜单的库。

Answer 2

我为你准备了一个基本思路，用react-router-dom:

  const {Router, Route, IndexRoute, Link} = ReactRouter;

  // A main React component using this.props.children will pull in all the children Routes in the router function at the bottom.
  const App = React.createClass({
     render: function() {
       return(
         <div>
            {this.props.children}
          </div>
       );
     }
  });

  const Home = React.createClass({
     render: function() {
       return(
        <div>
           <ul>
             <li><Link to="link-steak">Steak</Link></li>
             <li><Link to="link-pasta">Pasta</Link></li>
             <li><Link to="link-burgers">Burgers</Link></li>
           </ul>
        </div>
       );
     }
  });

  const LinkOne = React.createClass({
    render: function() {
      return(
        <div>
          <ul><li><a href="#">steak 1</a></li><li><a href="#">steak 2</a></li><li><a href="#">steak 3</a></li></ul>
           <Link to="/">back</Link>
        </div>
      );
    }
  });

  const LinkTwo = React.createClass({
    render: function() {
      return(
        <div>
           <ul><li><a href="#">pasta 1</a></li><li><a href="#">pasta 2</a></li><li><a href="#">pasta 3</a></li></ul>
          <Link to="/">back</Link>
        </div>
      );
    }
  });

  const LinkThree = React.createClass({
    render: function() {
      return(
        <div>
           <ul><li><a href="#">burger 1</a></li><li><a href="#">burger 2</a></li><li><a href="#">burger 3</a></li></ul>
          <Link to="/">back</Link>
        </div>
      );
    }
  });


  ReactDOM.render((
    <Router>
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="link-steak" component={LinkOne} />
        <Route path="link-pasta" component={LinkTwo} />
        <Route path="link-burgers" component={LinkThree} />
      </Route>
    </Router>
  ), document.getElementById('app'));

https://codepen.io/ene_salinas/pen/KGbEoW?editors=0010

我如何通过道具将一个组件传递给另一个组件

How can i pass a component to another component via props

reactjs

react-redux

react-router-v4