[英]Access a React component method / state from outside the component
我已经通过引用它的ID将reactjs
组件嵌入到现有的HTML页面中,如React的教程中所述:
ReactDOM.render(
<Page />,
document.getElementById('my-react-compnent')
);
然后:
<div id="my-react-compnent></div>
该组件将显示并按预期工作。
现在,我想将位于该页面上的按钮链接到我的组件(具体来说,我想检索其状态,但是对于本示例,即使调用其方法之一也可以)。
换句话说-单击外部按钮时,我想从Page
组件中调用方法吗?
我怎样才能做到这一点?
从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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.