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

Question

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

我想呈现缩略图列表，但我不知道将 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 中，执行以下操作。没有传递给合作伙伴组件的道具，它将有自己的状态，这将是您的选项 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>
    }
});

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

react render list of components using spread attributes

javascript

reactjs

react-router