首先,让我表示,这通常 不是
在React领域中解决问题的方法。通常,您要做的是将功能传递给道具中的子代,并传递事件中的子代的通知(或者更好的是:)
dispatch。
但是,如果 必须 在子组件上公开命令式方法,则可以使用refs。请记住,这是一个逃生舱口,通常表示可以使用更好的设计。
使用挂钩和功能组件(以前,仅基于类的组件才支持引用。随着React Hooks的出现,情况不再如此
>= react@16.8)
const { forwardRef, useRef, useImperativeHandle } = React;// We need to wrap component in `forwardRef` in order to gain// access to the ref object that is assigned using the `ref` prop.// This ref is passed as the second parameter to the function component.const Child = forwardRef((props, ref) => { // The component instance will be extended // with whatever you return from the callback passed // as the second argument useImperativeHandle(ref, () => ({ getalert() { alert("getalert from Child"); } })); return <h1>Hi</h1>;});const Parent = () => { // In order to gain access to the child component instance, // you need to assign it to a `ref`, so we call `useRef()` to get one const childRef = useRef(); return ( <div> <Child ref={childRef} /> <button onClick={() => childRef.current.getalert()}>Click</button> </div> );};ReactDOM.render( <Parent />, document.getElementById('root'));<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><div id="root"></div>
对于文档
useImperativeHandle()是在这里:
使用类组件(useImperativeHandle自定义使用时暴露给父组件的实例值ref。
>= react@16.4)
旧版API(const { Component } = React;class Parent extends Component { constructor(props) { super(props); this.child = React.createRef(); } onClick = () => { this.child.current.getalert(); }; render() { return ( <div> <Child ref={this.child} /> <button onClick={this.onClick}>Click</button> </div> ); }}class Child extends Component { getalert() { alert('getalert from Child'); } render() { return <h1>Hello</h1>; }}ReactDOM.render(<Parent />, document.getElementById('root'));<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><div id="root"></div>
<= react@16.3)
出于历史目的,这是您在16.3之前的React版本中使用的基于回调的样式:
const { Component } = React;const { render } = ReactDOM;class Parent extends Component { render() { return ( <div> <Child ref={instance => { this.child = instance; }} /> <button onClick={() => { this.child.getalert(); }}>Click</button> </div> ); }}class Child extends Component { getalert() { alert('clicked'); } render() { return ( <h1>Hello</h1> ); }}render( <Parent />, document.getElementById('app'));<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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)