从父级调用子级方法

从父级调用子级方法,第1张

从父级调用子级方法

首先,让我表示,这通常 不是
在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
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>
旧版API(
<= 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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5586225.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-14
下一篇 2022-12-14

发表评论

登录后才能评论

评论列表(0条)

保存