javascript - Reactjs 根据加载的组件传递 props

Question

我需要有关如何在加载时将 Reactjs 属性从组件传递到我的应用程序的建议。当我的 props 位于 app.js 中时，我可以传递该值，但是从单独的组件加载时如何处理该 props？

以下是到目前为止在 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

parent 对 child

如果你想传递所有的props:

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

或者如果只是一些:

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

child 对 parent

如果您的意思相反，则需要使用回调

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