React - 如何访问另一个组件中的函数？

我的结构为这样：React - 如何访问另一个组件中的函数？

 <ParentComponent /> 
<Child 1 />  <Child 2 />

我在<Child 1 />功能。由于<Child 1 />控制网格布局，<Child 2 />是带有按钮的导航栏，我想在<Child 2 />一个按钮，将在<Child 1 />重新设定参数。

我该如何做到这一点？据我所看到的，refs只能去一个“台阶”上树，不下来。

没有任何明显的方式这个功能可以从parent组件来调用。这里有什么办法吗？我能想到的所有解决方案都不是真正遵循React思维模式，即单向数据流。

来源

2017-04-27 cbll

你可以让父组件作为两个组件的容器重新呈现。因此，所有状态和函数都在父组件中处理，并将它们作为道具传递给其他组件。

例如

class Parent extends React.Component { 

     constructor() { 
      super(); 
      this.state = { 
       controls: controls 
      } 
     } 

     onClick = (dataFromChild2) => { 
       //Resetting 
       this.setState({controls: dataFromChild2}) 
     } 

     render() { 
      return (
       <div> 
         <Child1 gridControl={this.state.controls}/> 
         <Child2 onClick={this.onClick}/> 
       </div> 
      ) 
     } 
    }

您可以从this.props的gridControl和onClick在孩子部件

UPDATE

它认为这种方式，你有处理所需要的状态和功能父组件数据。儿童组件将这些数据进行相应的更新。

假设父组件是这样的：

class Parent extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     gridControl: {} 
    } 
    } 

    onChild2ButtonClick = (dataFromChild2) => { 
    this.setState({ 
     gridControl: dataFromChild2 
    }); 
    }; 

    render() { 
    return (
     <div> 
     <Child1 controls={this.state.gridControl}/> 
     <Child2 onClick={this.onChild2ButtonClick}/> 
     </div> 
    ); 
    } 
}

CHILD2组件是这样的：

class Child2 extends React.Component { 
    constructor() { 
    super(); 
    } 

    onClick =() => { 
    var data = {}; 
    this.props.onClick(data); 
    }; 

    render() { 
    return (
     <div> 
     <button onClick={this.onClick}/> 
     </div> 
    ); 
    }

如果您使用国Child1，不希望将它们更改为使用Parent组件中的函数处理它们，然后使用从父组件收到的新道具更新componentWillReceiveProps方法中的状态，以便发送的道具将与Child1组件中使用的状态相匹配。

希望这可以解决问题。

来源

2017-04-27 12:30:47

网格布局的状态在儿童1内完全控制。我没有看到我如何将它作为父母的道具传递，它在那里的许多功能中被操纵。我也不太确定我是否从您的示例中获取数据流。孩子2会将状态推回？你应该这样做吗？ – cbll

如何将“datafromchild2”传递给父组件中的函数？在调用onClick时，您可以使用Child2组件中的 – cbll

发送数据。所以它会是这样的'this.props.onClick（data）'。由于您没有使用商店系统。我认为这会做到这一点。您可以使用'componentWillReceiveProps'生命周期方法更新Child1组件中的状态。 –

方法1： 为此，您需要您需要维护一个商店。单击<Child2 />组件中的单击按钮可更新存储中的变量。阅读更新的变量在店里，如果有改变你<Child1 />组件更新值。你可以使用flux，redux，mobx等。作为商店的选择，但我会说你可以从REDX开始。

方法2：

如果你不希望使用存储，通过一个回调函数保持状态的<Parent />和按钮单击<Child2 />更新您的状态父。这种状态值作为道具传递给<Child1 />和更改，如果道具存在。

来源

2017-04-27 12:16:25

单页面应用程序似乎有点矫枉过正（尽管很多组件都提供了数据），但我想这是一个选项。 – cbll

如果你的结构看起来如下所示：

<ParentComponent> 
    <div> 
     <Child1 />  
     <Child2 /> 
    </div> 
<ParentComponent />

两个Child1和Child2应该 “沟通”，通过ParentComponent。
如果Child2将通知ParentComponent关于一个按钮点击事件，那么它可以相应地重新渲染Child1相应的道具或发射Child1得到的功能prop。这是react.js的基本流程

作为示例，请考虑具有Button和Door子组件的House组件。该Button将切换Door的开启和关闭。

class House extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      isOpened: props.isOpened, 
     }; 

     this.toggleOpenDoor = this.toggleOpenDoor.bind(this); 
    } 

    toggleOpenDoor() { 
     this.setState({ 
      isOpened: !this.state.isOpened 
     }); 
    } 

    render() { 
     return (
      <div> 
       <Button onClick={this.toggleOpenDoor} /> 
       <Door isOpened={this.state.isOpened} /> 
      </div > 
     ); 
    } 
} 

House.propTypes = { 
    isOpened: React.PropTypes.bool 
}; 

House.defaultProps = { 
    isOpened: true 
}; 

export default House;

论this.state.isOpened的Door每一次变化都会有新的值作为支柱

来源

2017-04-27 12:24:00

React - 如何访问另一个组件中的函数？

回答

相关问题