0

Подскажите можно ли в react реализовать следующий подход:

у меня есть базовый компонент MyBaseComponent, который я оформил как абстрактный класс (задал метод _base_render() который в базовом выбрасывает исключение)

от MyBaseComponent наследую свой компонент MyComponent, который использует очень много других моих компонентов, которые взаимодействуют с базовым классом

_base_render()
{
    return (
        <MyElement1>
            <MyElement2>
            <MyElement3>
            <MyElement4>
        </MyElement1>
    );
}

и т.д.

Сейчас мне приходится в .js файле, где описан MyComponent (или любой другой компонент - наследник MyBaseComponent) делать много импортов

import MyBaseComponent from './MyBaseComponent'
import MyElement1 from './MyElement1'
import MyElement2 from './MyElement2'
import MyElement3 from './MyElement3'
import MyElement4 from './MyElement4'

Что как-то несколько отягощает код.

Подскажите а есть ли какой-то способ избавиться от этих импортов, т.е. чтобы мне хватало только одного импорта

import MyBaseComponent from './MyBaseComponent'

и я получал доступ ко всем необходимым компонентам, т.е.

1) чтобы сделать что-то такое:

_base_render()
{
    return (
        <MyBaseComponent.MyElement1>
            <MyBaseComponent.MyElement2>
            <MyBaseComponent.MyElement3>
            <MyBaseComponent.MyElement4>
        </MyBaseComponent.MyElement1>
    );
}

2) аналогично п.1, но без MyBaseComponent.

2
  • импортировать в другом файле все импорты и использовать в этом файле один импорт
    – Randall
    17 апр 2019 в 13:15
  • @Tvseans, не помогает - вылезает такая ошибка Line 20: 'MyElement1' is not defined react/jsx-no-undef Search for the keywords to learn more about each error.
    – Zhihar
    17 апр 2019 в 14:22

2 ответа 2

1

В нормальном виде возможен только первый вариант. Второй тоже можно, но я крайне не советую использовать его, т.к. он выльется во множество проблем.

Первый вариант

Создаем модуль, который собирает в себе нужные компоненты:
MyComponents/index.js

import MyComponent1 from "./MyComponent1";
import MyComponent2 from "./MyComponent2";
import MyComponent3 from "./MyComponent3";

export default {
  MyComponent1,
  MyComponent2,
  MyComponent3
};

Импортируем его там, где хотим использовать свои компоненты:

import React from "react";
import MyComponents from "./MyComponents";

const App = () => (
  <div>
    <MyComponents.MyComponent1 />
    <MyComponents.MyComponent2 />
    <MyComponents.MyComponent3 />
  </div>
);

Весь код: https://codesandbox.io/s/vnp5ny2rq7

Второй вариант

Повторюсь, его я крайне не рекомендую использовать, но покажу, что он реализуем. А реализовать его можно при помощи глобальной области видимости, в нашем случае сейчас это window. Создаем модуль, который собирает в себе нужные компоненты и записывает их в глобальную область: MyComponents/index.js

import MyComponent1 from "./MyComponent1";
import MyComponent2 from "./MyComponent2";
import MyComponent3 from "./MyComponent3";

window.MyComponent1 = MyComponent1;
window.MyComponent2 = MyComponent2;
window.MyComponent3 = MyComponent3;

И тогда мы сможем писать вот так:

import React from "react";
import "./MyComponents";

const App = () => (
  <div>
    <MyComponent1 />
    <MyComponent2 />
    <MyComponent3 />
  </div>
);

Весь код: https://codesandbox.io/s/5kpm940ywl

Замечания по этому способу:

  1. Не true way. Теряется вся инкапсуляция, непонятно откуда эти компоненты берутся, в вашей системе теперь плюс один костыль.
  2. Если стоит eslint, то нужно отключить правило: react/jsx-no-undef, в начале файла пишем: /* eslint react/jsx-no-undef: 0 */. Но тогда если мы опечатаемся, то ошибку заметим только в рантайме.
  3. Если у вас еще серверный рендер, то нужно помнить, что глобальный скоп тогда будет отличаться.
  4. В случае tree shaking, нужно пометить модуль MyComponents как side-effect модуль.

В общем с этим способом добавляется еще ряд проблем, поэтому его не берите, используйте первый способ.

1
  • Огромное спасибо, наверное первый способ - это самое малое зло. Возможно можно ещё сделать как с import Rect, {Component}, чтобы не писать MyComponents., но тогда длинный import будет
    – Zhihar
    17 апр 2019 в 20:48
1

Если я правильно понял вашу проблему, можно поступить следующим образом:

Создадим файл MyBaseComponenеKit.js в котором один раз импортируем нужные компоненты

// MyBaseComponenеKit.js
import MyBaseComponent from './MyBaseComponent'
import MyElement1 from './MyElement1'
import MyElement2 from './MyElement2'
import MyElement3 from './MyElement3'
import MyElement4 from './MyElement4'
export default { MyBaseComponent, MyElement1, MyElement2, MyElement3, MyElement4 };

И теперь можно импортировать из MyBaseComponenеKit.js

import { MyBaseComponent, MyElement1, MyElement2, MyElement3, MyElement4 } from './MyBaseComponenеKit.js'

Другой вариант:

Можно просто создать компонент Basic:

import React from 'react';

import MyElement1 from './MyElement1';
import MyElement2 from './MyElement2';
import MyElement3 from './MyElement3';
import MyElement4 from './MyElement4';

const Basic = () => (
    <MyElement1>
        <MyElement2 />
        <MyElement3 />
        <MyElement4 />
    </MyElement1>
);

export default Basic;
4
  • В принципе да, это решает проблему кучи строчек, но за счёт появления одной длинной :) А можно и ее как-то сократить?
    – Zhihar
    17 апр 2019 в 14:59
  • Добавил еще один вариант. 17 апр 2019 в 15:05
  • второй вариант не очень :( У меня много таких вещей будет и мне не хотелось бы каждый раз где я буду формировать некоторый блок писать несколько импортов. Вот я и подумал, чтобы каждый раз мне всего лишь один импорт писать было бы (ну как в тех же c++ и подобных языках)
    – Zhihar
    17 апр 2019 в 15:32
  • Кстати первый вариант тоже почему-то не сработал :( Attempted import error: 'MyElement1' is not exported from '../MyElements/AllMyElements'.
    – Zhihar
    17 апр 2019 в 15:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.