如何干净地将信息传递给一个封闭的组成部分？

Question

我是一个无能mobx初学者谁才发现自己做奇怪的事情像道具传递一个“支架”结构，其修改其内容的内部部件与这样更改传播到外部组件。这听起来很肮脏，但经过了一堆回调的感觉甚至更脏。

所传递的信息包含东西，像第一个可见元素的索引，这是一件好事，没有人，但内部组件可以和应该计算。其他组件不应该知道，有一个滚动条或类似。

我希望这个片段说明我的问题。你可以点我一个干净的解决方案？

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