React.js 在组件流之间传递数据 [英] React.js pass data between components flow

问题描述

我创建了三个基本组件.

A 渲染组件 B 和 CB 就像包含标签 1,2,3 的标题C 是第一页，上面有两种形式，一次显示一个.在显示第一个表单时，我需要在 B 组件中显示选项卡 1.在显示第二个表单时，我需要在 B 组件中显示选项卡 3.

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

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

A.jsx

从'react'导入React；从'./B.jsx'导入B；从 './C.jsx' 导入 CA 类扩展 React.Component {构造函数(道具){极好的();this.state = {显示:'1'，}}使成为() {返回 (<div>{this.props.show}<B/><C/>

)}}出口默认A；

B.jsx

从'react'导入React；B 类扩展 React.Component {构造函数(道具){超级(道具)；this.state = {显示:'1'，}}使成为() {返回 (//这里是html代码)}}

C.jsx

C 类扩展 React.Component {构造函数(道具){超级(道具)；this.state = {显示:'1'，}}使成为() {返回 (//这里是html代码)}}

解决方案

你需要将你的状态添加到父组件这里它会是 A 组件然后传递一个函数来改变你的状态到 B 和 C 来改变你的状态下面点个赞

class A 扩展了 React.Component {构造函数(道具){极好的();this.state = {显示:'1'，};}更改显示(显示){this.setState({show: show});}使成为() {返回 (<div>{this.props.show}<B show={this.state.show}/><C handleChangeShow={this.changeShow.bind(this)} show={this.state.show}/>

)}}

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

C 类扩展 React.Component {handleChange({目标}){this.props.handleChangeShow(target.value)}使成为() {返回 (<select onChange={this.handleChange.bind(this)}><option value="0">隐藏</option><option value="1">show</option></选择>)}}

现在您可以在 B 中显示状态

B 类扩展 React.Component {使成为() {返回 ({this.props.show})}}

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

I have created three basic components.

A renders both the components B and C B is like header containg tabs 1,2,3 C is the first page on which there are two forms, one shows at a time. On showing first form i need to show tab one 1 in B component. On showing second form i need to show tab 3 in B component.

I just want to pass the data from C component on the basis of which form is showing to B component.

I put state on C component and tried to use same this.state.data or this.props.data for no value coming in B controller.

A.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;

B.jsx

import React from 'react';

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

C.jsx

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

解决方案

You will need to add your state to parent component here it would be A component then pass a function to change your states to B and C to change your state on A like below

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>
        )
    }
}

Now you have access to show state in your child components and can change it from them for example in 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>
        )
    }
}

Now you have access to show state in B

class B extends React.Component {

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

It wasn't clear enough what were you trying to do in your example so I tried to give a example how to pass state between child component in a general sense. I hope it would be useful enough

这篇关于React.js 在组件流之间传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！