Question

我是React的新手，我决定构建像计算器一样简单的东西来练习它的基础知识。但是，我在理解信息流背后的逻辑方面遇到了一些麻烦，要么子组件有一种方法可以执行逻辑并以自然方式更新父级。

例如，这是我的计算器的基本结构：

class Calculator extends React.Component {
    render() {
        return (
            <div className="calculator-main">
                <Screen numberOnScreen={this.state.numberOnScreen}/>
                    <NumberButton number={7} />
                    <NumberButton number={8} />
                    <NumberButton number={9} />
                    <OperatorButton operator="plus" view="-"/>
                ....
            </div>
        )
    }
}   


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

    render() {
        return (
            <div className="screen">{new Intl.NumberFormat().format(this.props.numberOnScreen)}</div>
        );
    }
};

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

    render() {
        const zeroClass = this.props.number === 0 ? " zero" : "";
        return (
            <button type="button" className={"number" + zeroClass}>{this.props.number}</button>
        );
    }
};

所以我知道：

我可以在Calculator中创建函数并将其作为prop传递给按钮组件，并将其命名为onClick。（但这感觉很奇怪）。
在Calculator compontent中创建一个事件监听器，创建在按钮组件内部运行，并通过事件传递值触发; （但这感觉很人为）。
使用某种全球商店？

但是，没有自然的反应方式吗？

谢谢！

Answer 1

我想您想了解React组件通信。在这里，我实现了Child to Parent通信。

在这种情况下，Parent的状态和状态更改方法通过props传递给子组件。然后孩子可以改变父母的状态使用这种方法。

React Component Communication

sns.barplot(x="DeviceId", y="Speed", data=result, palette=sns.cubehelix_palette(8))

使用子组件中的函数更改父组件的状态

1 个答案: