reactjs - 用 SubComponent 反应组件 - 热重载不起作用

Question

我的项目有一个简单的SubComponent. 如果我在内部进行任何更改，SubComonent它不会热重载。我不知道如何解决它。

我有这样定义的组件：

// Component.tsx
export const Component = () => {
  return <div>Component</div>;
};

Component.SubComponent = function SubComponent() {
  return <div>Hello From Sub</div>;
};

export const SubComponent1 = function SubComponent1() {
  return <div>Hello From Sub1</div>;
};

和用法：

// App.tsx
<Component.SubComponent />
<SubComponent1 />

如果我做了更改，Component.SubComponent它不会重新加载，但如果我做了更改，SubComponent1它会很好地工作。

我已经使用干净的 create-react-app 安装对此进行了测试，但它在那里也不起作用。

关于如何解决这个问题或代码有什么问题的任何想法？我在互联网上找到了很多关于子组件的文章。

Answer 1

这种方法对我来说似乎很糟糕。

export const Component = () => {
  return <div>Component</div>;
};

Component.SubComponent = function SubComponent() {
  return <div>Hello From Sub</div>;
};

一个一个地导出组件。

export const Form = () => (<></>)
export const Item = () => (<></>)

import * as Form from '...'

<Form.Form>
  <Form.Item>
  </Form.Item>
</Form.Form>

我<Form.Form />看那很丑。另一种方法是：

export const Form = () => (<></>)
export const Item = () => (<></>)

import { Form, Item as FormItem } from '...'

<Form>
  <Form.Item>
  </Form.Item>
</Form>