Reactjs übergeben Requisiten basierend auf geladenen Komponente

Question

Ich brauche Ratschläge, wie eine Reactjs Prop von einer Komponente an meine App übergeben, wenn es geladen wird. Ich bin in der Lage, den Wert zu übergeben, wenn meine Requisiten in app.js sind, aber wie handhabe ich die Requisite beim Laden von einer separaten Komponente?

Hier ist, was in app.js bisher funktioniert:

import React, { PropTypes, Component } from 'react'; 
import { Grid, Nav, Navbar, NavItem, Jumbotron } from 'react-bootstrap'; 
import { Link } from 'react-router'; 
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap'; 

function HeaderTitle(props) { 
    return <h1>{props.name}</h1>; 
} 

const headerTitle = <HeaderTitle name="About Page" />; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { ... 

<p>{headerTitle.props.name}</p> 

Answer 1

Eltern auf das Kind

Wenn Sie durch alle Requisiten weitergeben wollen:

render() { 
    return (
    <div> 
     <HeaderTitle {...this.props} />  
    </div> 
); 
} 

Oder wenn nur einige:

render() { 
    return (
    <div> 
     <HeaderTitle name={this.props.name} />  
    </div> 
); 
} 

Kind Übergeordnetes

Wenn Sie umgekehrt bedeuten, müssen Sie

einen Rückruf verwenden

// app 
render() { 
    return (
    <div> 
     <HeaderTitle onGetName={(name) => this.setState({childName: name})} />  
     <p>{this.state.childName}</p> 
    </div> 
); 
} 

// headertitle 
componentDidMount() { 
    // maybe some async call or something 
    axios 
    .get('/api/say-my-name') 
    .then(response => this.props.onGetName(response.data); 
} 

Answer 2

Also braucht ich denke, man soetwas wie Komponenten aus einer Datei in einer anderen importieren. So haben Sie Optionen zum Importieren und Exportieren von Komponenten aus einer anderen Datei, da React-Komponenten grundsätzlich Objekte sind. In index.js, wenn Sie so etwas wie

const headerTitle = <HeaderTitle name="About Page" />; 

export default headerTitle; 

und in app.js

import React, { PropTypes, Component } from 'react'; 
import { Grid, Nav, Navbar, NavItem, Jumbotron } from 'react-bootstrap'; 
import { Link } from 'react-router'; 
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap'; 
import HeaderTitle from '/// put the file relative location to app.js" 

function HeaderTitle(props) { 
    return <h1>{props.name}</h1>; 
} 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { ... 

<p>{headerTitle.props.name}</p> 
}