вызов и передать аргументы функции детей компонента из родительского компонента в reactjs

Question

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

Что такое правильный способ передачи аргументов от родительского к дочернему компоненту? Я использую refs, но кажется, что он не передает ничего в терминах аргумента функции.

Я показываю случай здесь: https://codepen.io/adamchenwei/pen/gLMaPo/?editors=0010

В принципе, если вы видите строку, в которой я написал console.log('child argument should be string'); он должен быть аргументом фактически передается вместо события.

Интересно, что я сделал что-то неправильно.

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

Answer 1

Существует только два способа доступа к родительским реквизитам в дочернем компоненте. Вы можете добиться этого в два следующих способах: -

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

Answer 2

Вместо того, чтобы использовать реф, я хотел бы использовать государственные и реквизита:

parentDoThing(event) { 
    const lifeTerms = { 
     heaven: 'yeeeeey', 
     hell: 'nooooooo', 
    } 
    if(event) { 
     this.setState({ lifeTerms: heaven }); 
    } else { 
     this.setState({ lifeTerms: hell}); 
    } 
} 

render() {  
    return (
     <section className="parent-comp" 
     onClick={this.parentDoThings}> 
     <ChildComponent 
      lifeTerms={this.state.lifeTerms}/> 
     <h1> Whats in App {this.state.text}</h1> 
     </section> 
);} 

А на ребенка компонента:

render() {  
    return (
     <section className="child"> 
     <section>this life is {this.state.life} </section> 
     <button onClick={this.doChildThings.bind(this, this.props.lifeTerms)}> Button </button> 
     </section> 
    ); 

Answer 3

Устранены мой вопрос, используя componentWillUpdate в сочетании с использованием родительского уровня state передается в дочерний объект как props, чтобы вызвать событие внутри дочернего элемента, потому что я не хочу, чтобы какой-либо триггер внутри дочернего элемента вызывал изменение, предоставленное родителем.