Question

在这种情况下，我的Web应用程序将具有带3个选项的标头。根据所选的选项，标题将使用新选项重新呈现。由于我是React的新手，因此我对代码结构的直接想法是拥有一个空的Header.js主文件，该文件将呈现该页面选项唯一的另一个组件。但是，我的Google搜索没有返回任何搜索信息，这可以帮助我了解如何通过react-router v4将组件传递给另一个组件。

一个例子：标头：牛排|面食|汉堡

如果用户选择“牛排”，则相同的标题现在将显示以下内容：标头：黑胡椒|蘑菇辣椒

标题的内容应该根据用户先前选择的内容进行更改

谢谢，我希望我不要被打倒，因为我真的不知道该怎么问这个问题。

Answer 1

我用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

Answer 2

有几种方法可以解决此问题，但是在不深入了解项目的情况下，您可以使用以下一般方法：

（您可以创建功能组件并使用它们，也可以只在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>
  )
 }
}

如果您要创建导航栏，而这些菜单项仅指向链接，则最简单的解决方案是使用带有菜单和子菜单的库。

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

2 个答案: