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

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

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

Reactjs基于加载的组件传递道具

2 个答案: