如何干净地将信息传递给封闭组件？

Question

我是一个笨手笨脚的 mobx 初学者，他刚刚发现自己在做一些奇怪的事情，比如将 props 中的 "holder" 结构传递给一个修改其内容的内部组件，并通过这种方式将更改传播到外部组件。这听起来很脏，但是传递一堆回调感觉更脏。

传递的信息包含诸如第一个可见元素的索引之类的东西，这是除了内部组件之外没有人可以而且应该计算的东西。其他组件甚至应该不知道有滚动条或类似的东西。

我希望这段代码能说明我的问题。你能告诉我一个干净的解决方案吗？

@observer class Inner {
    _someChange = (event) => {
        this.props.holder.something = event.something
    }

    _anotherChange = (whatever) => {
        this.props.holder.anotherthing = whatever.anotherthing
    }

    render() {
        return <div>
            <Something onClick={this._someChange} onWhatever={this._anotherChange}/>
    </div>
}

@observer class Outer {
    @observable _holder = {
         something: 0,
         anotherthing: '',
    }

    render() {
        return <div>
            <Inner holder={this._holder}/>
            <AComponentNeedingTheHolderContent something={this._holder.something}/>
        </div>
    }
}

Answer 1

据我了解，您想要的是能够在兄弟 Inner 和 AComponentNeedingTheHolderContent 之间共享数据。

使用 React 执行此操作的方法是按照您现有的方式将状态保持在外部，并定义可以修改此状态并将其传递给内部的函数。例如：

@observer class Inner {
    clickHandler = (event) => {
        this.props.modify_something(event.value);
    }

    render() {
        return <div>
            <Something onClick={this.clickHandler}/>
    </div>
}

@observer class Outer {
    @observable something = 'something';

    @action
    modify_something = (modified_value) => {
        this.something = modified_value;
    }

    render() {
        return <div>
            <Inner modify_something={this.modify_something} />
            <AComponentNeedingTheHolderContent something={this.something}/>
        </div>
    }
}

如何干净地将信息传递给封闭组件？

How to cleanly pass information to an enclosing component?

reactjs

mobx