React Component 与 SubComponent - 热重载不起作用

发布于 2025-01-09 00:15:26 字数 776 浏览 2 评论 0原文

我的项目有一个简单的 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 安装对此进行了测试，但它在那里也不起作用。

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

原文

I have an issue with my project with a simple SubComponent. If I do any changes inside that SubComonent it is not hot reloaded. I am not sure how to fix it.

I have components defined like this:

// 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>;
};

And usage:

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

If I do changes in Component.SubComponent it is not reloaded, but if I do changes in SubComponent1 it works well.

I have tested this with the clean create-react-app install and it does not work there too.

Any ideas on how to fix this or what is wrong with the code? I found quite a lot of articles about sub components on the internet.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白况 2025-01-16 00:15:26

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

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>

我发现很难看。另一种方法是：

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

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

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

The approach seems bad to me.

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

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

Export components one by one.

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

import * as Form from '...'

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

I see that <Form.Form /> is ugly. Another way would be:

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

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

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

回复收藏 0 原文

~没有更多了~