Reactjs pass реквизит на основе загруженного компонента

Question

Мне нужен совет о том, как передать опору Reactjs из компонента в мое приложение, когда оно загружено. Я могу передать значение, когда мои реквизиты находятся в app.js, но как я могу обрабатывать опору при загрузке из отдельного компонента?

Вот что до сих пор работает в 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'; 

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

Родитель ребенка

Если вы хотите, чтобы пройти все реквизита через:

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

Или, если только некоторые:

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

потомка к родителю

Если вы имеете в виду наоборот, вам нужно использовать обратный вызов

// 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

Так что я думаю, вам нужно некоторые вещи, как импортировать компоненты из одного файла в другой. Таким образом, у вас есть опции для импорта и экспорта компонентов из другого файла, поскольку компоненты React являются в основном объектами. В index.js, если у вас есть что-то вроде

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

export default headerTitle; 

и в 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> 
}