在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中访问子项中的父状态

回答

相关问题