与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，它就会正常工作。

我已经测试了这与干净的创建-反应-应用程序安装，它不工作那里也。

对于如何解决这个问题，或者代码有什么问题，有什么想法吗？我在互联网上发现了很多关于子组件的文章。

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>