时间戳

首页 > 解决方案 > 如何将数据从一个页面传递到另一个 React JS

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

问题描述

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

这是我的第一页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;

标签： javascriptreactjsreact-props

解决方案

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

在Personal您在该组件的状态上设置名称值时，您需要在其中进行渲染Final以便Personal可以将该值向下传递，或者为它们提供一个公共源以从中读取该数据，例如一个Context或一个公共父级（如<App>零件）。

推荐阅读