reactjs - 无法将状态数据作为 Prop 发送到另一个组件

Question

我是新来的 react 。我正在尝试使用react js构建一个 Electron 应用程序。

我想将父组件state值发送给子组件作为 Prop 。
父组件是Home，子组件是Help。

Home.jsx

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
        step: 1,
        name: "",
        address: "",
        amount: "",
        }
    }

    handleChange = (e) => {   
        let nam = e.target.name;
        let val = e.target.value;
        this.setState({ [nam]: val });
    }

    render() {
    const {date} = this.state;
    const values = {date}
        return(
            <Fragment>
            <label id="form-name">Name: </label>
            <input
                type="text"
                name="name"
                id="input-name"
                onChange={this.handleChange}     
            />
            {other values}
                <Link to="/help" className="btn">next </Link>    
            </div>
            </Fragment>
            );
            return(
                <Help 
                {...this.state}
                />
        )
    }
}

Help.jsx

import React, {Component, Fragment} from 'react';
import { Link } from 'react-router-dom';

export class Help extends Component {
  continue = () => {
    window.print();
  }

  render() {
   return(
    <Fragment>
        <p id="date">Date : {this.props.date}</p>
        <p id="name">RECIEVED With thanks from {this.props.name}</p>
        <Link to="/"><button id="btn-print" onClick={this.continue} value="Print"> Print</button></Link>
        <button id="btn-back" onClick={this.goBack}>
          Back
        </button>
      </Fragment>
    )
  }
}

export default Help;

谢谢您的帮助

Answer 1

不要使用基于类的组件，而是可以使用这样的功能组件

const help = (props) => {
  continue = () => {
    window.print();
  }
  render() {
   return(
   <p id="date">Date : {props.date}</p>
          <p id="name">RECIEVED With thanks from {props.name}</p>
<Link to="/"><button id="btn-print" onClick={this.continue} value="Print"> Print</button></Link>

        <button id="btn-back" onClick={this.goBack}>
          Back
        </button>
      </Fragment>
    )
  }
}