从组件外部访问React组件的方法/状态 [英] Access a React component method / state from outside the component
问题描述
我已经通过引用其ID来将 reactjs
组件嵌入到现有的HTML页面中,如React的教程中所述:
I have embedded a reactjs
component into an existing HTML page by referencing it's ID like described in React's tutorial:
ReactDOM.render(
<Page />,
document.getElementById('my-react-compnent')
);
然后:
<div id="my-react-compnent></div>
组件将显示并按预期工作.
The component is displayed and works as expected.
现在,我想将位于该页面上的按钮链接到我的组件(具体来说,我想检索其状态,但是对于本示例,即使调用其方法之一也可以).
Now I want to link a button located on that page to my component (to be specific I would like to retrive its state, but for the example even invoking one of its methods would be fine).
换句话说-当单击外部按钮时,我要从 Page
组件调用方法吗?
In other words - when clicking the outside button, I want to invoke a method from the Page
component?
我该怎么做?
推荐答案
旧建议
从 ReactDOM.render
分配返回的值确实允许访问组件及其方法.例如,在一个简单的应用程序中,我们可能有:
The Old Recommendation
Assigning the returned value from ReactDOM.render
does allow access to the component and it's methods. For example, in a simple app, we might have:
const PageComponent = ReactDOM.render(<Page />, document.getElementById("app"));
然后我们可以使用 PageComponent
访问
,并且可以使用 PageComponent.METHOD
访问其任何方法.
which we can then access using PageComponent
, and any of its methods can be accessed with PageComponent.METHOD
.
但是 ,根据文档可能会更改或不建议使用,因此不建议这样做.
However, according to the docs this might be changed or deprecated and is not recommended.
新建议是将回调 ref
附加到根元素.使用上面的相同示例:
The new recommendation is to attach a callback ref
to the root element. Using the same example above:
const PageComponent = ReactDOM.render(<Page ref={(pageComponent) => {window.pageComponent = pageComponent}}/>, document.getElementById("app"));
然后可以使用 window.pageComponent
访问
,并且可以使用 window.pageComponent.METHOD
访问其任何方法.
which we can then access using window.pageComponent
, and any of its methods can be accessed with 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>
这篇关于从组件外部访问React组件的方法/状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!