Question

我一直在使用网络组件（特别是聚合物），并且最近一直试图让我的头围绕React。我认为会有很多相似之处，尽管我在React中没有看到任何方式根据它所安装的DOM Node的属性来影响组件的初始状态。

这可能，还是我错过了React的意图？能够以这种方式定制组件似乎是使重用更容易的最明显方法之一。

谢谢，

Answer 1

React可以通过this.props访问DOM节点的所有属性。您可以设置React组件的状态，以便它反映初始属性的值，如下所示：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // here you intialize the state of the component with the value of myAttribute
    this.state = {myAttribute: props.myAttribute};
  }

  render() {
    return (
      <div>
        The value of myAttribute is: {this.state.myAttribute}
      </div>
    );
  }
}

现在，如果您更改DOM节点的属性并希望在状态中反映此更改，React会为您提供一个名为componentWillReceiveProps(nextProps)的生命周期方法，您可以在其中更新状态，如下所示：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // here you intialize the state of the component with the value of myAttribute
    this.state = {myAttribute: props.myAttribute};
  }

  componentWillReceiveProps(nextProps) {
    // here you update the state with the new value of myAttribute
    this.setState({myAttribute: nextProps.myAttribute});
  }

  render() {
    return (
      <div>
        The value of myAttribute is: {this.state.myAttribute}
      </div>
    );
  }
}

你可以在http://jsfiddle.net/ko2jfqeL/

找到一个带有示例的JSFiddle

DOM属性和反应

1 个答案: