Question

我是 React 新手，我正在做一个项目。我有两个页面/组件。我在页面上获取用户的详细信息，并希望在另一个页面上显示数据。但我做不到。有人可以帮忙吗。

这是我的第一页Personal.js


import React from "react";
import { Form, Row, Col, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
// import bootstrap from "bootstrap";
import { Link } from "react-router-dom";


class Personal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }

  render() {
    return (
      <>
        <h2 className="text-center my-4">Personal Information</h2>

        <div expand="md" className="container my-4 ">
          <Form >
            <Row className="my-4">
              <Col>
                <Form.Label>First Name</Form.Label>
                <Form.Control id="first_name" placeholder="First name" />
              </Col>
              
            </Row>

           
            <Link to="/Final">
              <Button
                onClick={() =>
                  this.setState({
                    name: document.getElementById("first_name").value,})}
                variant="outline-primary">{" "}Next</Button>{" "}
            </Link>
          </div>
        </div>
      </>
    );
  }
}

export default Personal;

这是我的第二页Final.js

import React from "react";
import { Link } from "react-router-dom";

const Final = (props) => {
  return (
    <>
      <h2>Your Name{this.props.name}</h2>   
     
    </>
  );
};

export default Final;

Answer 1

这可能无法解决问题，但您的 Final 组件是一个函数组件，它接受 props 作为参数，因此您只需访问 {{1} 而不是 this.props.name }. 我也无法弄清楚您渲染 Button 组件的 props.name 引号是怎么回事？

在 {" "} 中，您在 该组件的 状态上设置名称值，因此您需要在 Personal 内呈现 Final，以便您可以通过该值下降，或者给他们一个共同的来源来读取数据，例如Personal 或公共父级（如 Context 组件）。

如何将数据从一个页面传递到另一个 React JS

1 个答案: