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

Question

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

Итак, как я могу отправить мое событие щелчка от родителя к ребенку?

Можете ли вы предложить лучший способ решить эту проблему?

Answer 1

Использование реквизита, вы можете отправить данные или события детского компонента, Попробуйте это:

В родителю Component-

_handleOnclick(text){ 
    console.log('in parent component', text); 
} 

render(){ 
    return(
    <Child onClick={this._handleOnclick.bind(this)}/> 
    ) 
} 

В детской Component-

_handleClick(){ 
    console.log('in child component'); 
    this.props.onClick('child calling'); 
} 

render(){ 
    return(
     <p onClick={this._handleClick.bind(this)}>Click Me</p> 
    ) 
} 

Проверить jsfiddle ссылку : https://jsfiddle.net/px2dphje/2/