Question

我正在学习React，并不太了解如何基于props动态渲染组件。

对于练习，我正在建立一个运作良好的信用卡验证器。一旦信息有效，我想渲染我的组件以显示感谢信息。我添加了一个包含“默认”的属性“模式”。我的想法是，当信用卡信息被验证时，这个道具将变为“thankYouScreen”。当此prop变为“thankYouScreen”时，它将呈现ThankYouMessage组件。

这是怎么回事？

零件

import React from 'react';
import PaymentStore from './../store/paymentStore';

class InitialPaymentScreen extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    console.log(this.props);
    return (
      <div className="pay-form">
        <div className="pay-form-wrapper">
          <div className="pay-form-title">Payment Information</div>
          <form className="payment-form js-error-hook" onSubmit={this.props.store.init.bind(this.props.store)}>
            <div className="payment-form-wrap payment-form-cc-name">
              <label className="payment-form-label">Name on Card</label>
              <input className="payment-form-input js-cc-name" maxLength="50" placeholder="Enter your name..." type="text"/>
            </div>
            <div className="payment-form-wrap payment-form-cc">
              <label className="payment-form-label">Card Number</label>
              <input className="payment-form-input js-cc-number" placeholder="1234 5678 9012 3456" type="number"/>
            </div>
            <div className="payment-form-wrap payment-form-exp">
              <label className="payment-form-label">Expiration</label>
              <input className="payment-form-input js-cc-expiration" placeholder="04/17" type="number" min="0"/>
            </div>
            <div className="payment-form-wrap payment-form-cvv">
              <label className="payment-form-label">CVV</label>
              <input className="payment-form-input js-cc-cvv" placeholder="123" type="number"/>
            </div>
            <input type="submit" className="payment-form-submit" onClick={this.props.store.init.bind(this.props.store)} value="Next" />
          </form>
        </div>
      </div>
    );
  }
}

class ThankYouMessage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return(
      <div>Thanks!</div>
    );

  }
}

class PaymentForm extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <section className="main-content payment-form-wrapper">
        <InitialPaymentScreen store={this.props.route.store} mode="default"/>
      </section>
    );
  }
}

商品

let PaymentStore = {
  validateFields() {
    // Validates all the information
  },
  displayThankYou(){
    console.log("Thanks!") 
    // I'm assuming this is where I should update "mode" to render the component
  },
};

如何使用props动态呈现React组件？

0 个答案: