Методы как реквизиты reactjs

мы видели, как родительский компонент может передавать реквизиты своим дочерним компонентам. Любые данные в родительском компоненте, переданные как Props, доступны в дочерних компонентах. Теперь, что если дочерний компонент хочет общаться с родительским компонентом? БИНГО, мы по-прежнему используем реквизиты. Но на этот раз мы передаем дочернему компоненту ссылку на метод в качестве Props.

Для этого создадим новый компонент с именем Parent.js . Теперь давайте сделаем базовый макет для класса компонента и добавим конструктор в этот файл, В конструкторе мы установим состояние под названием Parent name со значением ‘I am Parent 🤟’, вместе с этим определим метод inviteParent, который просто оповещает hello по имени Parent, которое установлено в состоянии so hello, так как мы используем это ключевое слово в методе, нам нужно связать этот метод

export class Parent extends Component {
   constructor(props) {
     super(props)

     this.state = {
        first:'I am Parent'
     }
    this.inviteParent =this.inviteParent.bind(this)
   }

 inviteParent(child){
         alert(`HELLO ${this.state.first} `)
   }
  render() {
    return (
      <div>Parent </div>
    )
  }
}

export default Parent
Вход в полноэкранный режим Выйти из полноэкранного режима

Далее мы создадим еще один файл под названием child.js как функциональный компонент и включим дочерний компонент в метод render в родительском компоненте

export class Parent extends Component {
   constructor(props) {
     super(props)

     this.state = {
        first:'I am Parent'
     }
    this.inviteParent =this.inviteParent.bind(this)
   }

 inviteParent(){
         alert(`HELLO ${this.state.first} `)
   }
  render() {
    return (
      <div>
   <ChildComponent/>
    </div>
    )
  }
}


Войти в полноэкранный режим Выйти из полноэкранного режима

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

  render() {
    return (
      <div>
   <ChildComponent  inviteHandler={this.inviteParent}/>
    </div>
    )
  }
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь в дочернем компоненте при нажатии на эту кнопку мы просто вызываем Props inviteHandler


function ChildComponent(props) {
  return (
    <div>
      <button onClick={props.inviteHandler}> CHILD</button>
    </div>
  )
} 
export default ChildComponent

Войти в полноэкранный режим Выйти из полноэкранного режима

Переходим в браузер. Щелкните на кнопке. И вы увидите оповещение hello, parent. Итак, мы успешно вызвали метод в родительском компоненте из кнопки в дочернем компоненте, передав метод в качестве props в дочерний компонент

Conculsion 🤙
Итак, это практически то, как вы передаете методы в качестве реквизитов в компонентах react. В родительском компоненте определите метод на метке дочернего компонента, передайте метод как props в дочерний компонент, получите доступ к методу, используя объект props.

Оцените статью
devanswers.ru
Добавить комментарий