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 インストールでテストしましたが、そこでも機能しません。

これを修正する方法、またはコードの何が問題なのかについてのアイデアはありますか? インターネットでサブコンポーネントに関する記事をたくさん見つけました。

4

1 に答える 1

0

アプローチは私には悪いようです。

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

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

コンポーネントを 1 つずつエクスポートします。

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>
于 2022-02-21T15:33:46.017 に答える