如何在ReactJS中獲取我的子元素的狀態？

我想知道我怎樣才能在這種情況下，我的子元素的狀態，請如何在ReactJS中獲取我的子元素的狀態？

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
    render(){ 
     return(
      <div> 
       <Child /> 
      </div> 
     ) 
    } 
}

來源

2017-03-04 Orlando Andaur

請詳細說明一下你爲什麼需要這個。你在努力達到什麼目標？ –

如果我理解你，你需要在主要成分的狀態。

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     this.props.checkStatus(this.state.element); 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
getChildStatus(status){ 
    console.log(status) 
} 
render(){ 
    return(
     <div> 
      <Child checkStatus={this.getChildStatus}/> 
     </div> 
    ) 
}

}

正如費利克斯說，我們與平時像的onClick或部分的onChange事件時使用的道具扔功能。像return <h1 onClick={this.props.checkStatus(this.state.element)}>Hello</h1>

來源

2017-03-04 17:41:12 Andrew

雖然在'render（）'函數中調用'this.props.checkStatus（this.state.element）''有點奇怪。 –

@Felix我不知道他可以檢查這個狀態，所以我這樣做了。 – Andrew

或者你的意思是，我應該調用函數作爲回報？ – Andrew

簡單的東西使它工作，你可以做到這一點@Andrew暗示的方式。但是，我強烈建議阻止你這樣做，除非你真的知道你在做什麼。

React鼓勵單向數據流有助於讓您的代碼更易於推理。拇指方法的規則可以高達簡化爲道具下來，事件。

數據由父母傳遞到使用props（只讀防止孩子從父母突變是偶然的state）的孩子。

活動兒童冒泡通知其父發生了什麼。（典型地，通過調用在孩子的事件處理程序的父傳遞函數/回調props）

在反應的組分體系中，兩個父母和孩子已經分離作用域。這意味着家長應該不知道它的孩子（包括你的情況state）知識，孩子們只能通過props讀父的數據。爲了更改狀態以觸發UI刷新，this.setState()是您的朋友，通常用於事件處理程序/服務器請求回調。

推薦閱讀：https://facebook.github.io/react/docs/thinking-in-react.html

_{順便說一句。 React的聲明性組件組合本質上是函數組合。你的問題類似於「我可以在聲明的函數中獲取閉包的局部變量」，顯然，你可以這樣做，但是你必須問自己爲什麼要這樣做來打破封裝。}

來源

2017-03-04 18:37:53 Xlee

如何在ReactJS中獲取我的子元素的狀態？

回答

相關問題