React многократно используемый компонент состояния

Question

Предположим, что я создал компонент, который можно включить/выключить на основе состояния.

var onOff = React.createElement(<OnOff />, mountElement); 
onOff.setState({ on: false }); 

Позже я создаю новый компонент под названием «Родитель», который будет использовать OnOff внутри него.

render() { return <div><OnOff /></div> } 

Теперь, как я могу изменить состояние OnOff? Я не могу назвать setState на нем. И я не должен отвечать React doc. Так что я должен добавить начальное состояние для реквизита ONOFF в:

constructor(props) { 
    super(props); 
    this.state = { on: props.initialOn }; 
} 

затем в методе визуализации Родителя, установите опору initialOn с его состоянием:

render() { return <div><OnOff initialOn={false} /></div> } 

Но это все еще не работает, потому что всякий раз, когда я меняю Родитель state, компонент OnOff внутри него не воссоздается с новым начальным состоянием. Вместо этого он только повторно отображается со старым состоянием. У меня есть CodePen, чтобы это доказать: http://codepen.io/anon/pen/QjMwjO?editors=101

Answer 1

Одна из важных вещей, которые нужно понимать, когда «Мышление в реактиве» заключается в том, чтобы выяснить, к какому компоненту принадлежит государство.

Read this в React документы

Какие компоненты должны иметь государство?

Большинство ваших компонентов должны просто взять некоторые данные из реквизита и визуализировать его. Однако иногда вам нужно отвечать на ввод пользователя, запрос сервера или прохождение времени. Для этого вы используете состояние.

Постарайтесь сохранить как можно больше ваших компонентов без гражданства. Делая , вы изолируете состояние до его наиболее логичного места и сводите к минимуму избыточность, что упрощает рассуждение о вашем приложении.

Общая схема состоит в том, чтобы создать несколько элементов без состояния, которые только визуализируют данные, и содержат над ними компонент состояния, расположенный выше их в иерархии , который передает свое состояние своим дочерним элементам через реквизиты. Компонент состояния инкапсулирует всю логику взаимодействия, тогда как компоненты без состояния без учета состояния сохраняют декларативный способ отображения данных.

Таким образом, ваш OnOff не должен иметь состояние, но использовать свойства, переданные вместо родителя. Я проиллюстрировал это на http://codepen.io/anon/pen/gaxbGm?editors=101

render() { 
    writeLog("OnOff render called!") 
    writeLog("Child: " + this.props.initialOn) 
    return <span>{this.props.initialOn ? "On" : "Off"}</span>; 
    } 

Я также рекомендовал бы читать «Thinking in React», чтобы получить дополнительную ясность.

Answer 2

Вы можете обновить состояние компонента OnOff объявляя обновление также внутри функции componentWillReceiveProps, что-то вроде:

componentWillReceiveProps: 
    function(nextProps) { 
    this.setState({ 
     on : nextProps.initialOn 
    }); 
} 

Это позволяет обновлять состояние, когда новые реквизита прибывают. И это действительно реагирует.

Вы должны, однако, рассмотреть, если вам нужно состояние в OnOff вообще: если только исходная настройка и все обновления ТОЛЬКО поступают из его родительского компонента, то лучше будет использовать компонент без гражданства.