Reactjs：是否可以使用另一個父組件的父組件屬性

我有一個名爲separatefile.jsx的文件，在此文件中，父組件的名稱是Content，子組件的名稱是Child。Reactjs：是否可以使用另一個父組件的父組件屬性

separatefile.jsx

import React from 'react'; 
 
import Parent from './learning.jsx'; 
 

 
class Content extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     finding : 'i am finding' 
 
    } 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <Child childprop={this.state.finding}/> 
 
     <Parent/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Child extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h2>{this.props.childprop}</h2> 
 
     <h1>child class property</h1> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
export default Content;

這是命名爲learning.jsx另一個文件，這個文件有一個名爲作爲命名爲兒童父母與子女組件父組件。

我的問題是，我需要從子組件（separatefile.jsx檔子組件）訪問父組件屬性（learning.jsx父組件）...

learning.jsx

import React from 'react'; 
 

 

 
class Parent extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     searching : 'i will find the solution' 
 
    } 
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <Children childrenprop={this.state.searching}/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Children extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h2>{this.props.childrenprop}</h2> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
export default Parent;

來源

2016-08-23 praveenkumar

如果我的理解是否正確，要在使用Parent的狀態你Children組件？

你可以傳遞下來的部件樹props，例如：

class Content extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     finding : 'i am finding' 
    } 
    } 
    render() { 
    return (
     <div> 
     <Child childprop={this.state.finding}/> 
     <Parent finding={this.state.finding} /> 
     </div> 
    ); 
    } 
}

class Parent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     searching : 'i will find the solution' 
    } 
    } 
    render() { 
    return (
     <div> 
     <Children finding={this.props.finding} childrenprop={this.state.searching}/> 
     </div> 
    ); 
    } 
} 

class Children extends React.Component { 
    render() { 
    return (
     <div> 
     <h2>{this.props.childrenprop}</h2> 
     <div>{this.props.finding}</div> 
     </div> 
    ); 
    } 
}

來源

2016-08-23 14:14:08 Timo

高興地TimoSta，再一次簡單地解釋我的問題。我需要從兒童組件訪問'發現'屬性..我希望你能理解 – praveenkumar

它不起作用 – praveenkumar

@PraveenKumarInvoscape我改變了'Parent'的實例化。我犯了一個錯誤，並通過了錯誤的組件。請再試一次嗎？ – Timo

它可能不是一個直接的答案，但如果你正在開始一個新的應用程序，我會建議你使用Redux與react-redux。

Redux是一個JavaScript應用程序的可預測狀態容器。

它可以幫助您編寫在不同環境（客戶端，服務器和本機）中運行一致並且易於測試的應用程序。最重要的是，它提供了一個很棒的開發者體驗，例如live code editing combined with a time traveling debugger。

這是一個非常小的圖書館，因此很容易理解一切如何運作。這可能是解決您的問題的好方法。

Todo app example
您還可以檢查出真棒egghead.io免費教程 - Getting Started with Redux

這裏是the answer about the redux benefits其作者丹·阿布拉莫夫

來源

2016-08-23 14:13:26

偉大的建議 - 但這不是一個問題的答案，甚至沒有遠程幫助解決手頭的問題。它甚至表現爲對圖書館的一種無恥的推動（儘管如此，一個好的圖書館）。 –

我不同意。 [Vijay]（http://stackoverflow.com/users/558972/vijay）引用了React的官方文檔，這正是我的建議。使用全局'狀態'來管理不相關組件之間的通信。 –

Vijay的答案與此有什麼關係？你的答案完全不相關（flux vs redux）。你們都沒有提及如何訪問父組件的狀態。有很多方法可以在反應中管理狀態......很好。但你如何訪問父組件的狀態？回答這個問題，我會刪除我的downvote ... –

的React documentation提供了一個答案。

對於兩個組件之間的通信是沒有父子關係，你可以建立自己的全球盛會系統。訂閱componentDidMount（）中的事件，在 componentWillUnmount（）中取消訂閱，並在收到事件時調用setState（）。通量模式是安排這種情況的可能方法之一。

來源

2016-08-23 14:28:08 vijayst

thk u vijay，我是新的reactjs所以我需要一些詳細的解釋或給一些鏈接來描述，你定義的函數 – praveenkumar

Reactjs：是否可以使用另一個父組件的父組件屬性

回答

相關問題