javascript - 使用传播属性 react 渲染组件列表

Question

我想使用 {...props} 渲染组件列表，但我似乎在这里遗漏了一点，因为我已经阅读了有关通过 Link< 传递 props 的几乎所有内容 和 react-router 以及传播属性，但我仍然不在那里。

我想要渲染缩略图列表，但我不知道在哪里放置 var options 对象以修复 this.props.partnersData 未定义 我现在遇到的错误。

您可以在此处查看完整代码: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中，执行以下操作。没有传递给合作伙伴组件的 Prop ，它将有自己的状态，这将是您的选项变量。

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