使用传播属性反应组件的渲染列表

Question

I want to render a list of components using {...props} and I seem to be missing a point here because I've read almost everything about passing props via Link and react-router and spreading attributes and I'm still not there.

I want to render a list of thumbnails, and I don't know where to place the var options object in order to fix the this.props.partnersData is undefined error that I'm getting now.

You can see full code for this here: https://github.com/eyerean/company-website

The working version of partners.jsx is this, and in comments I have the desired version:

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>

  }
});

I want to avoid that ugly copy-pasted list of Thumbnails over there..

Partners are rendered with Link in community.jsx :

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

In partners.jsx, do following. There is no props passed to partners components, it will have it's own state which will be your options var.

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>
    }
});