代码之家 › 专栏 › 技术社区 › maaartinus

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

mobx reactjs

maaartinus · 技术社区 · 5 年前

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

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

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

1 回复 | 直到 5 年前

ManavM 5 年前

据我所知,你想要的是能够在兄弟姐妹之间共享数据 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>
    }
}

推荐文章