reactjs - 如何将数据从一个组件传递到另一个 ReactJS

Question

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

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;

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

Answer 1

要在第二个组件中传递值，您必须首先在第一个组件中导入它并将该值作为 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;

现在，假设您正在使用您的组件 One在 App或任何地方。每当您使用 <One/>您将在浏览器中看到以下内容:

hi
hi