React.js 在组件流之间传递数据

IT技术 reactjs react-jsx
2021-05-09 13:54:30

我创建了三个基本组件。

A 呈现组件 B 和 C B 就像包含选项卡 1,2,3 的页眉 C 是第一页，其中有两个表单，一次显示一个。在显示第一个表单时，我需要在 B 组件中显示选项卡 1。在显示第二个表单时，我需要在 B 组件中显示选项卡 3。

我只想根据显示的表单将数据从 C 组件传递给 B 组件。

我将状态放在 C 组件上，并尝试使用相同的 this.state.data 或 this.props.data 来处理 B 控制器中没有值的情况。

jsx

import React from 'react';
import B from './B.jsx';
import C from './C.jsx'
class A extends React.Component {
    constructor(props) {
        super();
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            <div>{this.props.show}
                <B />
                <C/>
            </div>
        )
    }
}

export default A;

jsx

import React from 'react';

class B extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            //html code here
        )
    }
}

jsx

class C extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            //html code here
        )
    }
}
2个回答

您需要将您的状态添加到父组件这里它是 A 组件然后传递一个函数将您的状态更改为 B 和 C 以更改您在 A 上的状态，如下所示

class A extends React.Component {
    constructor(props) {
        super();
        this.state = {
            show : '1',
        };
    }
    changeShow(show){
        this.setState({show: show});
    }
    render() {
        return (
            <div>{this.props.show}
                <B show={this.state.show}/>
                <C handleChangeShow={this.changeShow.bind(this)} show={this.state.show}/>
            </div>
        )
    }
}

现在您可以访问在您的子组件中显示状态，并且可以从它们中更改它，例如在 C 中 

class C extends React.Component {
    handleChange({target}){
        this.props.handleChangeShow(target.value)
    }
    render() {
        return (
           <select onChange={this.handleChange.bind(this)}>
                <option value="0">hide</option>
                <option value="1">show</option>
           </select>
        )
    }
}

现在您可以访问 B 中的显示状态

class B extends React.Component {

    render() {
        return (
           {this.props.show}
        )
    }
}

您在示例中尝试做什么还不够清楚，因此我尝试举例说明如何在一般意义上在子组件之间传递状态。我希望它足够有用

我尝试创建与您描述的相同的场景，请检查jsfiddle工作示例。

jsfiddle: https://jsfiddle.net/mj8rsawh/

如果您需要任何其他帮助，请对此发表评论。

其它你可能感兴趣的问题
上一篇Z 步的问题 下一篇通过移除内部几何体来优化用于 3D 打印的 3D 模型的简单方法