Question

鉴于以下功能组件，如何导出someFunction 而又不将其分解为单独的文件，以便可以对其进行测试？

const MyComponent = () => {

  const someFunction = () => {
    ...
    return someValue;
  };

  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(someFunction());
  }, []);

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

在函数声明之前添加导出似乎无效。

Answer 1

就像@ yury-tarabanko提到的export关键字只能在模块范围（也就是文件根）中使用。

export const someFunction = () => {
  ...
  return someValue;
};

export const MyComponent = () => {

  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(someFunction());
  }, []);

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

Answer 2

只需export default function FunctionName(){ }

或

const MyComponent = () => {

  const someFunction = () => {
    ...
    return someValue;
  };

  const [value, setValue] = useState(0);

  useEffect(() => {
    setValue(someFunction());
  }, []);

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

export default Mycomponent

如何导出功能组件功能？

2 个答案: