Question

我是一个笨拙的mobx初学者，他发现自己在做一些奇怪的事情，例如将props中的“ holder”结构传递给内部组件，该内部组件修改其内容，并以此将更改传播到外部组件。听起来很脏，但是传递一堆回调感觉更加脏。

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

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

<div id="app">
  <card @onerror="handleImgError"></card>
</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>
    }
}

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

1 个答案: