从组件外部访问 React 组件方法/状态

Question

我已经通过引用它的 ID 将一个reactjs组件嵌入到现有的 HTML 页面中，如 React 的教程中所述：

ReactDOM.render(
<Page />,
document.getElementById('my-react-compnent')
);

然后：

<div id="my-react-compnent></div>

组件将显示并按预期工作。

现在我想将该页面上的按钮链接到我的组件(具体来说，我想检索它的状态，但对于示例，即使调用它的方法之一也可以)。

换句话说 - 单击外部按钮时，我想从Page组件调用方法？

我该怎么做？

Answer 1

旧建议

从ReactDOM.render赋值确实允许访问组件及其方法。例如，在一个简单的应用程序中，我们可能有：

const PageComponent = ReactDOM.render(<Page />, document.getElementById("app"));

然后我们可以使用PageComponent，并且它的任何方法都可以使用PageComponent.METHOD.

但是，根据文档，这可能会被更改或弃用，不建议这样做。

新建议

新建议将回调ref附加到根元素。使用上面相同的示例：

const PageComponent = ReactDOM.render(<Page ref={(pageComponent) => {window.pageComponent = pageComponent}}/>, document.getElementById("app"));

然后我们可以使用window.pageComponent，它的任何方法都可以使用window.pageComponent.METHOD.

这也适用于子组件。

下面是一个完整的示例：

class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
returnCounter = () => {
return this.state.counter;
}

increment = (event) => {
event.stopPropagation();
this.setState(prevState => {
return {
counter: prevState.counter + 1
}
})
}

render() {
return (
<div onClick={this.increment}>
Child Value - {this.state.counter} - Click to increment
</div>
)
}
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
returnCounter = () => {
return this.state.counter;
}

increment = () => {
this.setState(prevState => {
return {
counter: prevState.counter + 1
}
})
}
render() {
return (
<div onClick={this.increment}>
<div>Parent Value - {this.state.counter} - Click to increment</div>
<ChildComponent ref={(childComponent) => {window.childComponent = childComponent}}/>
</div>
)
}
}
ReactDOM.render(<Page ref={(pageComponent) => {window.pageComponent = pageComponent}} />, document.getElementById("app"));
const parentBtn = document.getElementById("parentButton");
parentBtn.addEventListener("click", event => {
alert(window.pageComponent.returnCounter());
});
const childBtn = document.getElementById("childButton");
childBtn.addEventListener("click", event => {
alert(window.childComponent.returnCounter());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
<button id="parentButton">Get Parent State</button>
<button id="childButton">Get Child State</button>