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 - 如何訪問另一個組件中的函數？

回答

相關問題