在React中訪問子項中的父狀態

我在React中有（例如）兩個組件。第一個，app.js是根組件。它會導入一些JSON數據並將其放入其state。這工作正常（我可以在React devtools中看到它）。在React中訪問子項中的父狀態

import data from '../data/docs.json'; 

class App extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     docs: {} 
    }; 
    } 
    componentWillMount() { 
    this.setState({ 
     docs: data 
    }); 
    } 
    render() { 
    return (
     <Router history={hashHistory}> 
     <Route path="/" component={Wrapper}> 
      <IndexRoute component={Home} /> 
      <Route path="/home" component={Home} /> 
      <Route path="/docs" component={Docs} /> 
     </Route> 
     </Router> 
    ); 
    } 
}

第二，docs.js，意在表明該JSON數據。要做到這一點，它需要訪問app.js的state。此刻它出錯了，我知道爲什麼（this不包括app.js）。但是我怎麼能通過state從app.js到docs.js？

class Docs extends React.Component { 
    render() { 
     return(
      <div> 
       {this.state.docs.map(function(study, key) { 
        return <p>Random text here</p>; 
       })} 
      </div> 
     ) 
    } 
}

來源

2017-01-24 GluePear

這樣做將是穿過狀態爲props到Docs組件的正確方法。

但是，因爲你使用React Router它可以在一個有點不同的方式來訪問：this.props.route.param而不是默認this.props.param

所以，你的代碼看起來應該或多或少是這樣的：

<Route path="/docs" component={Docs} docs={this.state.docs} />

和

{this.props.route.docs.map(function(study, key) { 
    return <p>Random text here</p>; 
})}

來源

2017-01-24 10:22:07 pwolaq

我不能發送狀態所有我的20 componentes，有一種方法可以使用redux嗎？ – stackdave

另一種方法是：

<Route path="/docs" component={() => <Docs docs={this.state.docs}/>}>

如果你需要傳遞的孩子：

<Route path="/" component={(props) => <Docs docs={this.state.docs}>{props.children}</Docs>}>

如果你是這樣做，那麼你可以直接通過this.props.docs在兒童組件訪問你的道具值：

{ 
    this.props.docs.map((study, key)=> { 
     return <p key={key}>Random text here</p>; 
    }) 
}

來源

2017-01-24 11:10:02

另一種方式做這件事將是

 <Route path='/' render={ routeProps => <Home 
      {...routeProps} 
      docs={this.state.docs} 
      /> 
      } 
     />

雖然在子組件，您可以使用

this.props.docs

希望它可以幫助訪問docs！

來源

2017-11-30 15:47:43

在React中訪問子項中的父狀態

回答

相關問題