我可以在父母/孩子之間使用狀態和道具來控制

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;