reactjs - 在 react 中的功能组件内导出功能

Question

是否可以导出功能组件中的功能，然后将其导入到另一个功能组件中？示例代码:https://codesandbox.io/s/blissful-sanne-chk5g?file=/src/App.js:0-275

第一部分:

import React from 'react'

const componentOne = () => {

    function hello(){
    console.log("Hello, says the componentOne")
  }
  return (
    <div>
      
    </div>
  )
}

export default componentOne

第二部分:

import React from 'react'
import {hello} from "./ComponentOne"

const componentTwo = () => {

   
  return (
    <div>
      
    <button
    onClick={hello}>
        Hello
    </button>

    </div>
  )
}

export default componentTwo

App.js

import ComponentTwo from "./components/ComponentTwo";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ComponentTwo />
    </div>
  );
}

Answer 1

可以从功能组件中导出功能以供父组件使用。

你所要做的就是善用 refs。

看下面的例子:

组件一

import React, { forwardRef, useImperativeHandle } from "react";

const ComponentOne = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        hello() {
            console.log("Hello, says the componentOne");
        }
    }));

    return (
        <div></div>
    );
});

export default ComponentOne;

组件二

import React { useRef } from "react";
import ComponentOne from "./ComponentOne";

const ComponentTwo = () => {
    const componentOneRef = useRef(null);
    const componentOne = <ComponentOne ref={ componentOneRef } />;
   
    return (
        <div>
            <button onClick={ () => componentOneRef.current.hello() }>Hello</button>
        </div>
    );
}

export default componentTwo;

让我补充一点，在您的示例中，您似乎不想渲染您的 ComponentOne，而只想在其中使用 hello 函数。如果是这种情况，功能组件可能不是您真正想要的:您可能会考虑创建一个实用程序 javascript 文件，在其中导出函数。