Question

假设这是一个用于隐藏和显示数据的 Toggle 组件，当单独调用时它运行良好。

现在我有一个dashboard.js，我将在其中调用这个组件，但我只想输出数据，在他的文件中保持拨动开关分开。

如何将数据从 Toggle 组件传递到 Dashboard 组件？仍然是 React 的新手，从我学到的显然你不能将数据从孩子传递给父母。

import React, { Component } from 'react';

export default class Toggle extends React.Component{
    constructor(){
        super();
        this.state={isShowBody: false} 
    }

    handleClick(event) {
        this.setState({isShowBody: !this.state.isShowBody})
    }

    render() {
        return (
            <div   >
                <div  >
                <span className="switch switch-sm" >
                              <label>                                    
                                <input type="checkbox" name="select" onClick={this.handleClick.bind(this)}/>
                                <span />
                              </label>
                            </span> 
                </div>
                {this.state.isShowBody ? 
                    <div>
                        Data test
                    </div>
                : null}
            </div>
        );
    }
}

Answer 1

如果您希望父组件拥有子组件的信息，您需要将状态留给父组件并将其传递给子组件。

如果您的组件有可能变得更大，那么保持提升状态将成为一个问题，因此请考虑使用像 Redux 这样的状态管理库。

Answer 2

除了之前的答案之外，这可能会让您更深入地了解：使用 Redux 绝对是一个不错的选择，但这完全取决于项目的复杂性。

export class Toggle extends React.Component {
    constructor(){
        super();
        this.state={
            isShowBody: false
        } 
    }

    handleClick = (event) => {
        this.setState({ isShowBody: !this.state.isShowBody })
    }

    checkbox = () => {
        return (
            <span className="switch switch-sm" >
                <label>                                    
                    <input type="checkbox" name="select" onClick={() => this.handleClick(this)}/>
                </label>
            </span>
        )
    }

    dataTest = () => {
        return (
            <div>
                Data test
            </div>
        )
    }

    render() {
        return (
            <div>
                {this.checkbox()}
                {this.state.isShowBody && this.dataTest()}
                /**
                * You can extract this dataSet into another component as well where you can pass initial visibility value as this.state.isShowBody
                * for example
                * <Dataset visibility={this.state.isShowBody} />
                * */
            </div>
        );
    }
}

React：传递条件渲染数据

2 个答案: