React组件如何触发兄弟React组件的功能

假设我有以下反应代码。React组件如何触发兄弟React组件的功能

<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.js创建一个<ContactPage />。下面是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

我该如何解决这个问题得到什么？

来源

2016-11-04 John

你有导出默认的类页面扩展你的Navigation.js中的React.Component。这只是一个复制和粘贴错误？ – user5325596

理论上你可以通过使用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组件通过道具接收一个回调函数，导航元素并不需要知道它的兄弟姐妹什么，那就是使用父传达给他们。

反应方式是通过传递数据或回调来使用道具在组件之间进行通信。总是有一种比调用元素方法更好的沟通方式。即使我提出的方法是有缺陷，因为它仍然调用元素的方法。

来源

2016-11-04 21:51:14 guzart

React组件如何触发兄弟React组件的功能

回答

相关问题