[英]React Component with SubComponent - hot reload does not work
I have an issue with my project with a simple SubComponent
.我的项目有一个简单的
SubComponent
。 If I do any changes inside that SubComonent
it is not hot reloaded.如果我在该
SubComonent
内部进行任何更改,则不会热重新加载。 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.如果我在
Component.SubComponent
中进行更改,则不会重新加载,但如果我在SubComponent1
中进行更改,则效果很好。
I have tested this with the clean create-react-app install and it does not work there too.我已经用干净的 create-react-app 安装测试了它,但它在那里也不起作用。
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 inte.net.
我在inte.net 上找到了很多关于子组件的文章。
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.我看到
<Form.Form />
很丑。 Another way would be:另一种方法是:
export const Form = () => (<></>)
export const Item = () => (<></>)
import { Form, Item as FormItem } from '...'
<Form>
<Form.Item>
</Form.Item>
</Form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.