重复使用反应组分

Reusing react component

本文关键字：      更新时间：2023-09-26

我对组件react的使用有一些问题。基本上，我想在代码的各个部分使用"Title"组件，但它总是有不同的"state"。我不太理解关于这个问题的官方文档，因为我继承了这个组件，只更改了我想要的"状态"？我知道这个问题看起来很傻，但我正在学习，React与我看到的一切都很不一样。

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

在这个实例中应该使用props而不是state。道具由父对象所有，状态由组件本身所有。既然你想在多个地方使用这个组件，那么自然地，父母会决定标题的文本应该是什么——因此道具就是你想要的。

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

例如，这里有一个模拟组件，它多次使用您的Title组件：

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

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

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

您可能希望用{this.props.children}替换{this.state.content}，并像这样使用您的组件：

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

一般来说，尽可能避免使用state，dumb组件更容易重用。

相关文章：
  • 没有找到相关文章