Question

我创建了三个基本组件。

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

我只想根据哪个表单显示给B组件来传递C组件中的数据。

我把状态置于C组件上并尝试使用相同的this.state.data或this.props.data，以便B控制器中没有值。

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

Answer 1

你需要将你的状态添加到父组件这里它是一个组件然后传递一个函数来改变你的状态到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>
        )
    }
}

现在您可以访问子组件中的show state，并可以从它们中更改它，例如在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}
        )
    }
}

在你的例子中你想要做什么并不清楚，所以我试图举例说明如何在一般意义上在子组件之间传递状态。我希望它足够有用

Answer 2

我尝试创建您描述的相同方案，请查看jsfiddle以获取工作示例。

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

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

React.js在组件流

2 个答案: