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>

  }
});

我想在那边避免使用丑陋的复制粘贴的缩略图列表..

合作伙伴在Link中使用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

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

使用扩展属性反应渲染组件列表

1 个答案: