javascript - 是否可以使用 for 循环生成 React props？

Question

我想为创建的每个段落生成一个 Prop 。

  var TabContent = React.createClass({
   render: function(){
     var paragraph = [];
     for (var i = 0; i < this.props.nrPar; i++) {
          var x = "p" + i; //or can I use a variable after this.props.?
          paragraph.push(<p key={i}>{this.props.p + i}<br></br></p>);
     }

     return(              

        <div>            
              {paragraph}
        </div>
       );
   }
  });

  ReactDOM.render(

     <TabContent nrPar="3" 
      p1="first paragraph of text" 
      p2="second paragraph of text" 
      p3="third paragraph of text"/>

      ,month
  )

我希望能够选择要创建的段落数量，并能够在每个段落中编写文本。

nrPar 是我想要创建的段落数。

p1、p2、p3 是 nrPar 的结果，因为我现在想要 3 个段落。

Answer 1

在ReactJs中，您可以将数组作为 Prop 传递。稍微修改一下你的代码。

var TabContent = React.createClass({
  render: function () {
    var paragraph = [];
    for (var i = 0; i < this.props.paragraphs; i++) {
      paragraph.push(<p key={i}>{this.props.paragraphs[i]}<br></br></p>);
    }

    return (
      <div>
        {paragraph}
      </div>
    );
  }
});

ReactDOM.render(
  <TabContent
    paragraphs={[
      `first paragraph of text`,
      `second paragraph of text`
    ]}
  />
  , month
)