React refs的替代方案

Question

我有以下代码

<App>
    <SideBar />
    <MainView pages={this.state.pages} />
</App>

App组件基本上负责创建只是DOM画布元素数组的页面。但是在MainView中，我必须使用refs将元素插入到MainView的DOM中，就像这样

componentWillReceiveProps(p, e) {
    let self = this;
    self.holder.current.innerHTML = "";
    p.pages.forEach(p => {
        self.holder.current.appendChild(p);
    })
}

我原以为我会在MainView中做这样的事情

render() {
    return (
            <div className="main-view-display" id="main-view-display">{this.props.pages.join('')}</div>
    )
}

但这肯定不起作用。我也被告知Refs可能会被弃用。那么将DOM元素传递给孩子的最佳方法是什么？我不希望创建canvas的逻辑进入MainView，因为MainView组件是一个愚蠢的组件。将逻辑放在那里可能会降低其可用性