如何在React中的每個地圖上使用狀態？

Question

我怎樣才能讓我在NavBar聲明的狀態links可能發送鍵和值在我的渲染，以顯示以下幾種觀點：

（Codepen）

玉：

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

您可以使用如下功能。在鏈接上迭代使用地圖。您不必爲簡單的鏈接列表創建新組件。

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

Answer 2

在您當前的示例中this.props.links是undefined，因爲links數組是state（而不是props）的一部分。

嘗試{this.state.links.map(this.renderLinks)}。