webentwicklung-frage-antwort-db.com.de

Zugriff auf übergeordneten Status in Kind in React

Ich habe (z. B.) zwei Komponenten in React. Die erste, app.js, ist die Wurzelkomponente. Es importiert einige JSON-Daten und legt sie in ihrer state ab. Das funktioniert gut (ich kann es in den React Devtools sehen).

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>
    );
  }
}

Das zweite, docs.js, soll diese JSON-Daten anzeigen. Dazu muss auf die state von app.js zugegriffen werden. Im Moment ist es fehlerhaft und ich weiß warum (this enthält app.js nicht). Wie kann ich dann die state von app.js an docs.js übergeben?

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

Der richtige Weg, dies zu tun, wäre, den Zustand als props an die Docs-Komponente zu übergeben.

Da Sie jedoch React Router verwenden, kann auf andere Weise darauf zugegriffen werden: this.props.route.param anstelle des Standardwerts this.props.param

Ihr Code sollte also ungefähr so ​​aussehen:

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

und

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

Eine andere Möglichkeit, dies zu tun, ist:

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

Wenn Sie Kinder übergeben müssen:

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

Wenn Sie dies so tun, können Sie auf Ihre Requisitenwerte direkt über this.props.docs in Child Component zugreifen:

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

Eine andere Möglichkeit, dies zu tun, wird sein

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

In der untergeordneten Komponente können Sie mit auf docs zugreifen

this.props.docs

Ich hoffe es hilft!

0
lavee_singh