Reactコンポーネントが自身のAPIを暴露する方法

前言
その実現は、React＋Type Scriptに依存しています.どのように一つのコンポーネントの方法を他のコンポーネントに露出しますか?NOTE:以下の方法は絶対的ではなく、より良い方法で実現されるかもしれません.また、より多くの方法でサブアセンブリのAPIを暴露することができます.ここではアイデアを提供するだけです.
refを通して
注:本節の例は関数ユニットRef(Hook)の方式を使用する.
この中の基本的な知識は以下の通りです.

Hook useRef

HookuseImperate Handle

React.forwardRef

 // parent.tsx
 import React, {useRef } from "react"
 import Child from "./child"
 ​
 const Parent = () => {
  const classChildRef: any = useRef(null)
  //           childGet()
  const getClassChildFn = () => classChildRef.current.childGet()
  return (
      

          
                
      
  )
 }
 export Parent

 // child.tsx
 import React, {useImperativeHandle, useRef } from "react"
 ​
 //    React.forwardRef()   ref     （               ref），          React   。
 //       React.forwardRef  ，      ：Cannot add property current, object is not extensible
     const Child = React.forwardRef(
          (props: any, ref: any) => {
          let state = { index: 0 }
          const divRef = useRef()
          //   1              ref   。
          //       ref     2                 .
          useImperativeHandle(ref, () => (
              {
                childGet() { console.log(state.index) },
              }
          ))
          return (
Child
)
      }
 )
 export default Child

親コンポーネントボタンをクリックすると(サブアセンブリ値を取得する)、useImperativeHandle Hookによって露出されたchildGet()を使用して、サブアセンブリのインスタンスのstate.index値がコンソールに出力される.
プロモーション

 // parent.tsx
 import React from 'react';
 import Child from "./child";
 const Parent = () => ()
 export Parent

 // child.tsx
 import {useEffect} from 'react';
 const Child = (props: any) => {
      const sayHello = (v: any) => { console.log(v) }
      //             props(sayHello)  ，           ，             props.
      useEffect(() => props.sayHello 
          ? sayHello(props.sayHello) 
          : console.error('sayHello is not passed'))
      return (
)
 }
 export default Child;

当在父组件使用子组件时，只需要向子组件传递约定的 props，那么子组件将按照某种方式对传递的 props 进行处理，或者说是工作。

Child 的静态属性

 // parent.tsx
 import React from 'react';
 import Child from "./child";
 const Parent = () => ()
 Child.say('Yomua'); //      ：Yomua
 export default Parent;

 // child.tsx
 import React from 'react';
 const Child = () => {
  const say = () => console.log(this)
  return (
Child
)
 }
 //   Child       
 Child.say = (v: any) => { console.log(v) }
 export default Child;

サブアセンブリには静的な属性があるので、親コンポーネントにはサブアセンブリを導入すれば、直接に使用することができる.
インスタンス化コンポーネント

 // parent.tsx
 import React, { Component } from 'react';
 import Child from "./child"; 
 const ClassParent = () => {
      const getChildValue = () => {
          let child = new ClassChild("")
          child.childGet(); //   ：0
      }
      return (
          

              
                    
          
      )
 }
 export default Parent

 // child.tsx
 import {Component} from "react"
 class ClassChild extends Component {
      static childGet: Function;
      state: { index: number, }
      constructor(props: any) {
          super(props)
          this.state = { index: 0 }
      }
      //               （             ）
      childGet = () => { console.log(this.state.index) }
      render() {return (
Child
) }
 }
 export default ClassChild;

親コンポーネントは例示的な化学子コンポーネントを必要とするので、サブアセンブリは、class componentの形式を使用するか、または関数的なコンポーネントを使用することが望ましい(矢印式の関数的なコンポーネントを除く).