React Higher Order Component - 从包装器组件调用包装组件中的函数
React Higher Order Component - call function in the wrapped component from the wrapper component
假设我使用了正确的模式,我希望能够从 <Wrapper/>
内部调用 someFunc()
- 它位于 <Home/>
内部。见下文:
var Home = React.createClass({
someFunc() {
console.log('How can I call this from <Wrapper/>?')
},
render() {
return <h1>Hello World</h1>
}
})
var Wrapper = (Home) => {
return React.createClass({
render() {
return <Home {...this.props}/>
}
})
}
var HomeWrapped = Wrapper(Home)
ReactDOM.render(<HomeWrapped/>, document.getElementById('root'))
你可以使用 ref
:
var Wrapper = (Home) => {
return React.createClass({
render() {
return (
<div>
<button onClick={() => {this.home.someFunc()}} />
<Home
{...this.props}
ref={(c) => this.home = c;}
/>
</div>
);
}
})
}
假设我使用了正确的模式,我希望能够从 <Wrapper/>
内部调用 someFunc()
- 它位于 <Home/>
内部。见下文:
var Home = React.createClass({
someFunc() {
console.log('How can I call this from <Wrapper/>?')
},
render() {
return <h1>Hello World</h1>
}
})
var Wrapper = (Home) => {
return React.createClass({
render() {
return <Home {...this.props}/>
}
})
}
var HomeWrapped = Wrapper(Home)
ReactDOM.render(<HomeWrapped/>, document.getElementById('root'))
你可以使用 ref
:
var Wrapper = (Home) => {
return React.createClass({
render() {
return (
<div>
<button onClick={() => {this.home.someFunc()}} />
<Home
{...this.props}
ref={(c) => this.home = c;}
/>
</div>
);
}
})
}