Question

我有一个计划组件，可以在其中定义计划类型，然后重定向到注册组件。我希望能够在我的注册组件中显示用户选择的计划类型？

我正在尝试像这样更新状态：

 export default class Plans extends Component {
      constructor(props) {
        super(props)
        this.state = {
          planType: '',

    };
     }

     render() {
       return (
    <div>

          <div className="billing_freq">Billed Monthly</div>
          <form action="pro-invitation" method="post"> 
            <input type="hidden" name="plan_type" value="monthly_pro" /> //I want to show this in signup
            <div className="select_btn">
              <input type="submit" name="submit" onClick={() => this.setState({planType: "monthly_pro"})} value="Invitation only" />
            </div>
          </form>


Signup: // a separate component
      <label className="container"><span className="plan_name"></span> //PLAN TYPE HERE
  </label>


class App extends Component {

 render () {
    return (
<BrowserRouter>
  <div className="App">

    <Switch>
      <Route exact path='/plans' component={Plans} />   
      <Route exact path='/signup' component={Signup} />
    </Switch>

  </div>
</BrowserRouter>

Answer 1

您将如何呈现注册组件？

如果从路由中选择，则将有不同的实现方式，并且如果您将子代传递用作子组件，则像这样-

<SignUp planType={this.state.planType} />

并以

的身份访问“注册”组件

<label className="container"><span className="plan_name"></span>{this.props.planType}
</label>

Answer 2

您想要将planType状态赋予子组件。

您可以这样做：

<Signup planType={this.state.planType} />

要在子级组件中使用此功能，请使用从父级那里获得的道具，这是您的planType状态。

<label className="container"><span className="plan_name"></span>{this.props.planType}</label>

如何在React中将静态数据从一个组件传递到另一个组件？

2 个答案: