我可以在父母/孩子之间使用状态和道具来控制

Question

我正在学习React/redux - 神奇的框架，不知道JS counl是这个很酷的过程！我有一个父组件和一个子组件。孩子可以隐藏/在显示方式：

1. 按下孩子按钮隐藏它
2. 按下按钮上的父节点来显示/隐藏

1）可以控制通过使用this.state 2）可以通过设置来自父母的道具来控制

我的问题是我无法控制带有状态和道具的孩子，因为我看到它是状态或道具。

（这是不完全正确，我可以使用事件componentWillReceiveProps - 。这是要走的路即主要使用状态，但道具和状态之间转移与事件）

开放给其他好的建议

感谢

__EDIT____________EDIT_________EDIT___________EDIT___________

刚才看了FB docu再次和猜测，我的建议是推荐的方式：

在安装的组件 收到新的道具之前调用componentWillReceiveProps（）。如果您需要更新状态以响应prop更改（例如，重置它），您可以比较this.props 和nextProps，并使用this.setState（）以 此方法执行状态转换。

Answer 1

您可以将状态和函数从父项传递给子项目作为道具。该功能可用于切换状态。您可以在父母和子女都使用此功能。

例子：

// parent 
import React, { Component } from 'react'; 
import ChildComponent from './path/to/child'; 

class ParentComponent extends Component { 
    constructor(props) { 
     super(props); 
     this.handleToggle = this.handleToggle.bind(this); 
    } 

    state = { 
     isVisible: false; 
    } 

    handleToggle(current) { 
     this.setState({ 
      isVisible: !current 
     }) 
    } 

    render(){ 
     <div> 
      <ChildComponent handleToggle={this.handleToggle} isVisible={this.state.isVisible} /> 
      <button onClick={(isVisible) => this.handleToggle(this.state.isVisible)}>Toggle me</div> 
     </div> 
    } 
} 

export default ParentComponent; 


// child 
import React from 'react'; 

const ChildComponent = ({ isVisible, handleToggle }) => { 
    return (
     <button onClick={(isVisible) => handleToggle(isVisible)}>Toggle me</div> 
    ); 
} 

export default ChildComponent;