如何将数据从一个组件传递到另一个 ReactJS答案

【问题标题】：How to pass data from one component to another ReactJS如何将数据从一个组件传递到另一个 ReactJS
【发布时间】：2019-12-02 12:34:33
【问题描述】：

我有两个组件。第一个已初始化状态：

import React from 'react';

class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div prop={this.state.data}>{this.state.data}</div>  
        );
    }
}

export default One;

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>{this.prop}</div>     
        );
    }
}

export default Two;

第一个组件打印出数据的状态。我如何将该值作为只读值传递到我的第二个组件并呈现它？

【问题讨论】：

标签： reactjs

【解决方案1】：

你必须像这样把这个'Two'组件称为'One'

一个组件：

render() {
  return (
     <Two myProp={this.state.data} />
  )
}

你可以随意调用它（myProp）

并在“两个”组件中阅读此内容：

render() {
  return (
     <div>Received data from parent Component: {this.props.myProp}</div>
  )
}

在将“Two”组件调用为“One”之前，您必须导入该文件

import Two from './path/to/component';

【讨论】：

您可以在网上搜索任何课程，例如udemy 网站，因为这个问题是关于反应的非常基础的，你可以很容易地学习它:)

【解决方案2】：

One.js

import React from 'react';
import Two from './two'
class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div>{this.state.data}
            <Two dto={this.state} /></div>
        );
    }
}

export default One;

Two.Js

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>Component Two data: {this.props.dto.data}</div>     
        );
    }
}

export default Two;

【讨论】：

【解决方案3】：

要在第二个组件中传递值，您必须首先在第一个组件中导入它并将值作为 prop 传递。

例如，您的代码可能如下所示：

import React from 'react';
import Two from './Two' // I am assuming One.js and Two.js are in same folder.

class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div>
               <div>{this.state.data}</div>
               <Two value={this.state.data} />
            </div>
        );
    }
}

export default One;

然后在Two.js 中，您可以访问如下值：


import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>{this.props.value}</div>     
        );
    }
}

export default Two;

现在，假设您在 App 或任何地方使用您的组件 One。每当您使用<One/> 时，您都会在浏览器中获得以下信息：

hi
hi

【讨论】：

this.prop ??你确定？ ;)

【解决方案4】：

只需在 One 组件渲染方法中添加以下代码，并将数据作为只读的 props 传递

import React from 'react';
import Two from '/components/Two'
class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div prop={this.state.data}>{this.state.data}</div>  
            <Two data={this.state.data} />
        );
    }
}

export default One;

然后在组件二中访问数据添加以下代码

import React from 'react';

class Two extends React.Component {
constructor(props){
super(props)
}

    render() {
        return (
            <div>{this.props.data}</div>     
        );
    }
}

export default Two;

props 将保存从父元素传输的对象

【讨论】：