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

您必须像这样将“两个”组件称为“一个”

一个组件：

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

您可以随意调用它（myProp）

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

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

在将“两个”组件称为“一个”组件之前，必须导入该文件

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

Answer 2

要在第二个组件中传递值，必须首先将其导入第一个组件中，然后将值作为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

Answer 3

只需在一个组件的render方法中添加以下代码，然后将数据作为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;

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

import React from 'react';

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

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

export default Two;

道具将保存从父元素转移的对象

Answer 4

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;

两个Js

import React from 'react';

class Two extends React.Component {

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

export default Two;

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

4 个答案: