Блог

Главная - Вопросы по программированию - Как загрузить дочерний компонент в родительский компонент

Как загрузить дочерний компонент в родительский компонент

#reactjs #react-typescript

#reactjs #react-typescript

Вопрос:

В react я использую tsx file. где, как загрузить дочерний компонент под родительский компонент?

вот страница моих продуктов:

 import React from "react";
import {
  Link,
  Route,
  Switch,
  useRouteMatch,
  useParams
} from "react-router-dom";

import "./products.scss";

const Shoes = React.lazy(() => import("./shoes/shoes.component"));
const Cloths = React.lazy(() => import("./cloths/cloths.component"));

export default class Products extends React.Component {
  render() {
    return (
      <>
        <header>
          <Link to="/shoe">Shoes</Link>
          <Link to="/cloths">Cloths</Link>
        </header>
        <h1>Products page</h1>;
        <main>
          <h2>Subpage goes here </h2>
          <p>sub pages should load here </p>
        </main>
      </>
    );
  }
}

по щелчку дочернего Link элемента я хочу загрузить их в main элемент.

Живая демонстрация

Комментарии:

1. вы можете загрузить дочерний компонент внутри «main» в зависимости от условия расположения

Ответ №1:

Пожалуйста, проверьте документы для получения дополнительной информации

    <div>
      <header>
        <Link to="/products/shoe">Shoes</Link>
        <Link to="/products/cloths">Cloths</Link>
      </header>
      <h1>Products page</h1>
      <Route path={`/products/shoe`}>
        <Shoes />
      </Route>
      <Route path={`/products/cloths`}>
        <Cloths />
      </Route>
    </div>

ДЕМОНСТРАЦИЯ

Комментарии:

1. кстати, я получаю сообщение об ошибке, как Property 'name' is missing in type '{}' but required in type '{ name: any; }'. в index.tsx файле. есть идеи? Как загрузить ботинки по умолчанию?

2. сделайте его <Home name={«dummyName»}/> внутри index.tsx

3. обувь и одежда загружаются как абсолютный путь вместо ссылки на родительский. /products/shoes вместо этого он не вводится как /shoes … как абсолютный путь. как это исправить

4. @user2024080 привет, что-то не так с этой реализацией, я работаю над этим .. скоро обновится.

5. Я думаю, withRouter мы можем использовать для компонента класса. необходимо провести некоторое исследование