При взаимных вызовах между реагирующими компонентами вызывающий объект называется родительским компонентом, а вызываемый — дочерним компонентом. Значения могут передаваться между родительским и дочерним компонентами: 1. Когда родительский компонент передает значение дочернему компоненту, передаваемое значение сначала передается дочернему компоненту, а затем в дочернем компоненте используются реквизиты для получить значение, переданное родительским компонентом; 2. Дочерний компонент При передаче значений родительскому компоненту необходимо передать их родительскому компоненту через метод триггера.
Операционная среда этого руководства: система Windows7, версия React18, компьютер Dell G3.
1. Компоненты в React
Компонент реагирования представляет собой самоопределяемый тег, не являющийся HTML. Оговаривается, что первая буква компонента реагирования пишется с заглавной буквы:
класс App расширяет компонент{}<App />
2. Родительско-дочерние компоненты
Когда компоненты вызывают друг друга, вызывающий объект называется родительским компонентом, а вызываемый — дочерним компонентом:
импортировать React из 'реагировать';импортировать дочерние элементы из './Children';class Up расширяет React.Component {constructor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children /> </div> ) }}export default Up;import React из 'react';class Children расширяет React.Component{constructor(props){ super(props); this. state = { } } render(){ return ( <div> Children </div> ) }}экспортировать дочерние элементы по умолчанию;
3. Родительский компонент передает значение дочернему компоненту.
Родительские компоненты передают значения дочерним компонентам с помощью реквизита. Когда родительский компонент передает значение дочернему компоненту, передаваемое значение сначала передается дочернему компоненту, а затем в дочернем компоненте реквизиты используются для получения значения, переданного родительским компонентом.
Родительский компонент определяет свойство при вызове дочернего компонента:
<Children msg="Родительский компонент передает значение дочернему компоненту" />
Это значение msg будет привязано к атрибуту props субкомпонента, и субкомпонент можно будет использовать напрямую:
это.props.msg
Родительские компоненты могут передавать значения и методы компонентам и даже могут передавать себя дочерним компонентам.
3.1 Передаваемое значение
импортировать React из 'реагировать';импортировать дочерние элементы из './Children';class Up расширяет React.Component {constructor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children msg="Родительский компонент передает значение дочернему компоненту" /> </div> ) }}export default Up;import React из 'react';class Children расширяет React.Component{ конструктор (реквизит){ super(props); this.state = { } } render(){ return ( <div> Children <br /> {this.props.msg} </div> ) }}export default Children;
3.2 Способ передачи
импортировать React из 'реагировать';импортировать дочерние элементы из './Children';class Up расширяет React.Component {constructor(props){ super(props); this.state = { } } run = () => { console.log ("метод запуска родительского компонента"); } render(){ console.log("render"); return( <div> up <Children run={this.run} /> </div> ) }}export default Up ;import React из 'react';class Children расширяет React.Component{constructor(props){ super(props); this.state = { } } run = () => { this.props.run(); ){ return ( <div> Children <br /> <button onClick={this.run}>Run</button> </div> ) }}экспортировать дочерние элементы по умолчанию;
3.3 Передача родительского компонента дочернему компоненту
импортировать React из 'реагировать';импортировать дочерние элементы из './Children';class Up расширяет React.Component {constructor(props){ super(props); this.state = { } } run = () => { console.log ("метод запуска родительского компонента"); } render(){ console.log("render"); return( <div> up <Children msg={this}/> </div> ) }}export default Up;import React from 'react';class Children расширяет React.Component{constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg } render); (){ return ( <div> Children <br /> <button onClick={this.run}>Run</button> </div> ) }}экспортировать дочерние элементы по умолчанию;
4. Подкомпонент передает значение родительскому компоненту.
Дочерний компонент передает значение родительскому компоненту через метод триггера.
импортировать React из 'реагировать';импортировать дочерние элементы из './Children';class Up расширяет React.Component {constructor(props){ super(props); this.state = { } } getChildrenData = (data) => { console. log(data); } render(){ console.log("render"); return( <div> up <Children upFun={this.getChildrenData}/> </div> ) }}export default Up; импортировать React из 'реагировать';класс Children расширяет React.Component{constructor(props){ super(props); this.state = { } } render(){ return ( <div> Children <br /> <button onClick={() = > {this.props.upFun("данные дочернего компонента")}}>Выполнить</button> </div> ) }}экспортировать дочерние элементы по умолчанию;
5. Получите свойства и методы подкомпонента через ссылки в родительском компоненте.
импортировать React из 'реагировать';импортировать дочерние элементы из './Children';class Up расширяет React.Component {constructor(props){ super(props); this.state = { } } clickButton = () => { console.log (this.refs.children); } render(){ console.log("render"); return( <div> up <Children ref="children" msg="test"/> <button onClick={this.clickButton }>click</button> </div> ) }}export default Up;``````jsimport React from 'react';class Children расширяет React.Component{constructor(props){ super(props); state = { title: "SubcomComponent" } } runChildren = () => { } render(){ return ( <div> Children <br /> </div> ) }}export default Children;````
