如何在两个组件之间传递值？

Question

我有2个单独的组件，“表单”组件是您输入名称的第1步，然后单击<Link />进入下一步，即“欢迎”组件。

如何将名称值{this.state.value}从Form组件传递到Welcome组件，以便它可以检索在Form组件中键入的内容。

表单组件：

import React from 'react';
import Link from 'react-router';

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''      
    };      
  }

  render() {
    return (
      <div className='root'>
        <p>Setup the engine analysation presentation to demo incubation functionality.</p>
        <div className='fieldRow'>
          Name
          <input type="text" autoFocus value={this.state.value} placeholder='Enter Name...'  />
        </div>
        <div className='btnWrapper'>
          <Link to='/welcome' >Access Demo</Link>
        </div>
      </div>
    );
  }
}

export default Form

欢迎组件：

import React from 'react';

class Welcome extends React.Component {
  render() {
    return (
      <div className='root'>
        Welcome <!-- Name Input from Form component -->
      </div>
    );
  }
}

export default Welcome;

Answer 1

你可以像这样传递它

<Link to={{
 pathname: '/welcome',
 state: {
  name: this.state.value
 }
}}>Access Demo</Link>

然后使用withRouter在欢迎页面（组件）上获取它

const { location } = this.props;
const name = location && location.state && location.state.name;