重复使用反应组件

Question

我对组件反应的使用有一些疑问。 基本上，我想在代码的各个部分中使用“标题”组件，但是它始终具有变化的“状态”。 我不太了解有关此问题的官方文档，因为我确实继承了此组件，仅更改了我想要的“状态”？ 我知道这个问题看起来很愚蠢，但是我正在学习，React与我所看到的一切都大不相同。

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

Answer 1

在这种情况下，您应该使用道具而不是状态。 道具由父母拥有，而状态由组件本身拥有。 由于您想在多个地方使用此组件，因此，父母自然会决定标题的文本-因此，道具就是您想要的。

React有一个特殊的prop 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>

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