react使用傳播屬性渲染組件的列表

Question

我想使用{...props}渲染組件列表，我似乎在這裏錯過了一個觀點，因爲我幾乎閱讀了有關通過Link和react-router傳播道具以及傳播屬性和I'米仍然不存在。

我想呈現縮略圖列表，並且我不知道將var options對象放置在何處以便修復我現在正在獲取的this.props.partnersData is undefined錯誤。

你可以看到完整的代碼爲這個位置：https://github.com/eyerean/company-website

的partners.jsx工作版本是這樣的，在我的意見有需要的版本：

var React = require('react'); 
var Thumbnail = require('./thumbnail'); 

// var options= { 
// partnersData: [{ 
//  src:"http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg", 
//  header:"companyName", 
//  link:"//example.com/" 
// },{ 
//  src:"http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg", 
//  header:"companyName", 
//  link:"//example.com/" 
// }] 
// }; 

module.exports = React.createClass({ 
    render: function(){ 

    // console.log('props in partners: ', this.props); 
    // var list = this.props.partnersData.map(function(thumbnailProps){ 
    // return <Thumbnail {...thumbnailProps} /> 
    // }); 
    // 
    // return <div> 
    // {list} 
    // </div> 

    return <div> 
     <h2>Partners</h2> 
     <div className="row"> 
      <div className="col-md-4"> 
      <Thumbnail 
      src="http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg" 
      header="companyName" 
      link="//example.com/" 
      /> 
      </div> 
      <div className="col-md-4"> 
      <Thumbnail 
      src="http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg" 
      header="companyName" 
      link="//example.com/" 
      /> 
      </div> 
      <div className="col-md-4"> 
      <Thumbnail 
      src="http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg" 
      header="companyName" 
      link="//example.com/" 
      /> 
      </div> 
     </div> 
     <div className="row"> 
      <div className="col-md-4"> 
      <Thumbnail 
      src="http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg" 
      header="companyName" 
      link="//example.com/" 
      /> 
      </div> 
      <div className="col-md-4"> 
      <Thumbnail 
      src="http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg" 
      header="companyName" 
      link="//example.com/" 
      /> 
      </div> 
     </div> 
     </div> 

    } 
}); 

我想避免這種醜陋的複印通粘貼縮略圖的那邊名單..

合作伙伴在community.jsx與Link呈現：

module.exports = React.createClass({ 
    render: function(){ 
    return <div className="container-fluid"> 
     <div className="col-md-3 sidebar fix"> 
      <ul className="nav nav-sidebar"> 
      <li className="active"><Link to="community/partners">Partners</Link></li> 
      <li><Link to="community/blog">Blog</Link></li> 
      </ul> 
     </div> 

     <div className="container col-md-9"> 
      <h2>Community</h2> 
      <LoremIpsum /> 
     </div> 
     </div> 
    } 
}); 

Answer 1

在partners.jsx中，請執行以下操作。沒有道具傳遞給合作伙伴組件，它將擁有自己的狀態，這將是您的選擇變種。

module.exports = React.createClass({ 
    getInitialState: function() { 
    return { 
     partnersData: [{ 
     src:"http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg", 
     header:"companyName", 
     link:"//example.com/" 
     },{ 
     src:"http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo.svg", 
     header:"companyName", 
     link:"//example.com/" 
     }] 
    }; 
    }, 

    render: function(){ 
    console.log('props in partners: ', this.state); 
    var list = this.state.partnersData.map(function(thumbnailProps){ 
     return <Thumbnail {...thumbnailProps} /> 
    }); 

    return <div> 
     {list} 
    </div> 
    } 
});