Атрибуты DOM и реакция

Question

Я уже некоторое время использую веб-компоненты (в частности, полимер), и недавно пытаюсь разобраться с React. Я думал, что будет довольно много общего, хотя я не видел в React никакого способа повлиять на начальное состояние компонентов на основе атрибутов узла DOM, который он монтирует.

Возможно ли это, или я пропустил намерение React? Возможность настраивать компоненты таким способом кажется одним из наиболее очевидных способов облегчить повторное использование.

Спасибо,

Answer 1

React может получить доступ ко всем атрибутам узла DOM через this.props, Вы можете установить состояние компонента 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>
    );
  }
}

Вы можете найти JSFiddle с примером здесь http://jsfiddle.net/ko2jfqeL/