Question

如何使我在links上声明的状态NavBar可能在我的渲染中发送键和值，以显示以下视图：

玉：

div(id="app")

CSS：

$orange: #FC7C00;

body {
  font-family: 'Lato', sans-serif;
}

.wrapper {
  height: 100vh;
}

.contents {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: calc(100vh - 200px);
}

h1 {
  text-align: center;
  font-size: 72px;
}

.sticky-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: $orange;
  height: 60px;
  &__heading {
    color: white;
    text-transform: uppercase;
    font-family: 'Dosis', sans-serif;
    font-size: 2em;
  }
}

.sticky-buttons {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  height: 100%;
  &__link {
    text-decoration: none;
    color: white;
    padding: 20px;
    display: block;
    text-transform: lowercase;
    font-weight: 300;
  }
  i {
    font-size: 1.25em;
    margin: 0 5px;
  }
}

.main-nav {
  margin-top: 60px;
  &__list {
    display: flex;
    justify-content: center;
  }
  &__item {
    margin: 0 15px;
  }
  &__link {
    text-decoration: none;
    display: block;
    color: black;
    padding: 20px 0;
    &:hover {
      color: $orange;
    }
  }
}

JS：

var { Router, Route, IndexRoute, Link, browserHistory } = ReactRouter;

/*
 * A simple React component
 */
var Guide = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        <StickyBar />
        <NavBar />
        <div className="contents">
          {this.props.children}
        </div>
      </div>
    )
  }
});

var StickyBar = React.createClass({
  render: function() {
    return (
      <div className="sticky-bar">
        <div className="sticky-buttons">
          <a href="#" className="sticky-buttons__link sticky-buttons__prev">Guide</a>
          <h4 className="sticky-bar__heading">Buyer's Guide</h4>
          <a href="#" className="sticky-buttons__link sticky-buttons__next">Next <i className="fa fa-angle-right"></i></a>
        </div>
      </div>
    )
  }
});

var NavBar = React.createClass({
  getInitialState: function() {
    return  {
      initialLinks: [
        {
          "name": "start here",
          "link": "start-here"
        },
        {
          "name": "choose your plan",
          "link": "choose-your-plan"
        },
        {
          "name": "choose your template",
          "link": "choose-your-template"
        },
        {
          "name": "choose your host",
          "link": "choose-your-host"
        }
      ],
      links: []
    }
  },
  componentWillMount: function() {
    this.setState({links: this.state.initialLinks})
  },
  renderLinks: function(link) {
     return (
      <li className="main-nav__item"><Link to={link.link} className="main-nav__link">{link.name}</Link></li>
     )
  },
  render: function() {
    return (
      <nav className="main-nav">
        <ul className="main-nav__list" links={this.state.links} >
          {this.state.links.map(this.renderLinks)}
        </ul>
      </nav>
    )
  }
});

var StartHere = React.createClass({
  render: function() {
    return (
      <div>
        Start Here
      </div>
    )
  }
})

var ChoosePlan = React.createClass({
  render: function() {
    return (
      <div>
        Choose a plan
      </div>
    )
  }
})

var ChooseTemplate = React.createClass({
  render: function() {
    return (
      <div>
        Choose a template
      </div>
    )
  }
})

var ChooseHost = React.createClass({
  render: function() {
    return (
      <div>
        Choose a host
      </div>
    )
  }
})

var routes = (
  <Router history={browserHistory}>
        <Route path="/" component={Guide}>
      <IndexRoute component={StartHere} />
      <Route path="/" component={Guide} />
      <Route path="start-here" component={StartHere} />
      <Route path="choose-your-plan" component={ChoosePlan} />
      <Route path="choose-your-template" component={ChooseTemplate} />
      <Route path="choose-your-host" component={ChooseHost} />
    </Route>
    </Router>
);

/*
 * Render the above component into the div#app
 */
React.render(<Router>{routes}</Router>, document.getElementById('app'));

我尝试使用this.props.links.map(this.renderLinks)无效。我做错了什么？

Answer 1

在您当前的示例中，this.props.links为undefined，因为links数组是state（不是props）的一部分。

试试{this.state.links.map(this.renderLinks)}。

Answer 2

您可以使用以下功能。在链接上使用地图迭代。您不必为简单的链接列表创建新组件。

<ul className="main-nav__list">
      {this.state.links.map((item) => 
      <a href={item.link}> 
         {item.name}                 
      </a>
      )}
</ul>

链接：http://codepen.io/anon/pen/QNgVqv

如果你想迭代链接和渲染组件，你可以写这样的东西。

<ul className="main-nav__list">
      {this.state.links.map((item) => 
      <Link link={item.link} name={item.name} />
      )}
</ul>

如果你使用ES2015，你可以写这样的东西。它与前面的例子有相同的结果。

<ul className="main-nav__list">
      {this.state.links.map((item) => 
      <Link {...item} />
      )}
</ul>

如何在React的每个地图上使用状态？

2 个答案: