反应中功能组件内的导出功能答案

【问题标题】：Export function inside functional component in react反应中功能组件内的导出功能
【发布时间】：2021-06-18 14:08:16
【问题描述】：

可以导出功能组件内部的功能并且可以导入到另一个功能组件中吗？示例代码：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>
  );
}

【问题讨论】：

如果要导出功能需要将其移出组件
您找到解决方案了吗？遇到同样的问题
嗨 Katharina，就我而言，我使用自定义钩子解决了这个问题，允许您导出具有所有逻辑的组件，另一个选项可以是：stackoverflow.com/questions/37949981/…
尝试查看 useImperativeHandle 钩子。你可以在这里读到它。 stackoverflow.com/questions/57005663/…

标签： reactjs function export

【解决方案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 文件，用于导出函数。

【讨论】：

【解决方案2】：

你可以这样做：

组件一：

import React from "react";

export function hello() {
  console.log("Hello, says the componentOne");
}

const 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 "./styles.css";
import ComponentTwo from "./components/ComponentTwo";

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

这里是一个例子：https://codesandbox.io/s/focused-forest-zncxn?file=/src/App.js

【讨论】：

感谢您的回答，但我想知道是否可以从组件内部导出，因为我的函数与其他函数有依赖关系。