Question

我对使用组件反应有些疑问。基本上我想使用＆＃34;标题＆＃34;代码的各个部分中的组件，但它始终具有＆＃34;状态＆＃34;有所不同。我不太了解这个问题的官方文档，因为我继承了这个组件，只改变了＃34;状态＆＃34;为了我想要的？我知道这个问题看起来很愚蠢，但我学习和反应与我看到的一切都截然不同。

＆＃13;

var Title = React.createClass({
  displayName: "Title",
  getDefaultProps: function () {
    return {
      className: ""
    }
  },
  render: function () {
    return <h1 className={this.props.className}>{this.state.content}</h1>
  }
});

＆＃13;

Answer 1

在这个例子中你应该使用道具而不是状态。道具由父母拥有，州由该组件本身拥有。由于您希望在多个地方使用此组件，因此父母自然会决定标题文本应该是什么 - 因此道具就是您想要的。

React有一个特殊的道具children，它接受在组件的JSX标签中传递的任何值。

例如，这是一个模拟组件，它多次使用你的Title组件：

var MyComponent = React.createClass({

  render: function() {
    return (
      <div>
        <Title className="foo">Hello</Title>
        <Title className="bar">World</Title>
      </div>
    );
  }

});

由于您现在将文本作为children道具传递给组件，因此您必须更新Title组件以呈现此内容：

var Title = React.createClass({
  displayName: "Title",
  getDefaultProps: function () {
    return {
      className: ""
    }
  },
  render: function () {
    // NOTE: we are now using children prop
    return <h1 className={this.props.className}>{this.props.children}</h1>
  }
});

这样做的另一个好处是，您可以构建包含多个子节点的更复杂的标题，并且它可以正常工作：

var MyOtherComponent = React.createClass({

  render: function() {
    return (
      <div>
        <Title className="foo">
          <span>Hello</span>
          <a href="bar.html">World</a>
        </Title>
      </div>
    );
  }

});

Answer 2

您可能希望将{this.state.content}替换为{this.props.children}并使用您的组件：

<Title className="myclass">my title</Title>

作为一般规则，尽量避免使用状态，哑组件更容易重复使用。

重用反应组分

2 个答案: