Question

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

func viewWillDisappear(_ animated: Bool) {
    super.viewWilDisappear(animated)
    if let tabBarController = self.tabBarController as? TabBarDelegate {
        tabBarController.button.isHidden = true
    }

}

func viewWillAppear(_ animated: Bool) {
    super.viewWilAppear(animated)
    if let tabBarController = self.tabBarController as? TabBarDelegate {
        tabBarController.button.isHidden = false
    }
}

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

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
)

Answer 2

对我来说，这似乎有点反面。最简单的方法可能只是传递字符串数组作为道具。

如果您需要对段落计数做一些事情，只需像这样获取数组长度即可：

const TabContent = props => (
  <div>
    <p>count: {props.paragraphs.length}</p>
    {props.paragraphs.map((paragraph, index) => (
      <p key={index}>{paragraph}</p>
    ))}
  </div>
);

ReactDOM.render(
  <TabContent paragraphs={["first", "second"]} />,
  document.querySelector("#root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

是否可以使用for循环生成react道具？

2 个答案: