Как может компонент React активировать функцию компонента ответа брата?

Question

Предположим, у меня есть следующий код реакции.

<Navigation parentWindow={this} /> 
<p>Sub Pages</p> 
<ReactCSSTransitionGroup 
    component="div" 
    transitionName="page-transition" 
    transitionEnterTimeout={0} 
    transitionLeaveTimeout={500} 
    > 
     {React.cloneElement(this.props.children, { 
      key: location.pathname 
     })} 
    </ReactCSSTransitionGroup> 

ReactCSSTransitionGroup в конечном итоге вынести <ContactPage />, который создается с помощью ContactPage.js. Вот что ContactPage.js выглядит следующим образом:

import React from 'react'; 

export default class Page extends React.Component 
{ 
    testMe() {alert('Hello World!');} 
    render() {return <div>Hello</div>;} 
} 

С моей <Navigation />, который создается Navigation.js, я хочу, чтобы иметь возможность, чтобы вызвать ContactPage.testMe(). Так что я сделал это в моем Navigation.js

import React from 'react'; 

export default class Page extends React.Component 
{ 
    render() { 
     this.props.parentWindow.props.children.testMe(); 
     return <div>Navigate me</div>; 
    } 
} 

Но когда я запускаю проект, мой переход дает мне ошибку:

Uncaught TypeError: this.props.parentWindow.props.children.testCall 

Как обойти эту проблему?

Answer 1

Теоретически вы можете достичь этого, используя refs. В компоненте ParentWindow вы должны назначить ref клонированным детям, которые вы затем передадите в качестве опоры для навигации.

React работает немного иначе, чем другие JS-библиотеки, и это заставляет вас перемещать вашу бизнес-логику или логику событий в родительский компонент и передавать его в качестве реквизита. Я бы предположил, что вы передаете функцию обратного вызова на страницу навигации, которая при запуске вызывает метод ContactPage.

class Navigation extends React.Component { 
    render() { 
    this.props.onAlertParent(); 
    return <div>Navigate me</div>; 
    } 
} 

class ParentWindow extends Component { 
    alertChild() { 
    if (this.childNode && this.childNode.testMe) { 
     this.childNode.testMe(); 
    } 
    } 

    render() { 
    <div> 
     <Navigation onAlertParent={() => this.alertChild()} /> 
     <p>Sub Pages</p> 
     <ReactCSSTransitionGroup 
     component="div" 
     transitionName="page-transition" 
     transitionEnterTimeout={0} 
     transitionLeaveTimeout={500} 
     > 
     {React.cloneElement(this.props.children, { 
      key: location.pathname, 
      ref: (node) => { this.childNode = node; } 
     })} 
     </ReactCSSTransitionGroup> 
    </div> 
    } 
} 

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

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