0

Хочу сделать библиотеку компонентов, чтобы можно было использовать в разных приложениях. Естественно, один компонент из библиотеки может использовать другой компонент, допустим начальный рендеринг такой:

<Provider store={store}>
  <AppMain>
    <Library_LoginForm />
  </AppMain>
</Provider>

Library_LoginForm - компонент из библиотеки. Он в свою очередь использует два компонента текстового ввода, в результате render получается таким:

class Library_LoginForm {
  render() {
    return(
      <div>
        <Library_TextInput caption="Логин" />
        <Library_TextInput caption="Пароль" hidden="true" />
      </div>
    );
  }
}

Компоненты Library_LoginForm, Library_TextInput не знают о хранилище конкретного приложения. Они ожидают, что в их props окажется необходимая им информация. Она там окажется в результате срабатывания функций вида mapToProps при использовании @connect из react-redux. Но ведь один библиотечный компонент тогда должен в случае нужды в другом библиотечном компоненте использовать его "@connect"-версию. А откуда он его возьмет?

Конечно, можно делать @connect только компонентам "верхнего уровня", а они пусть сами пробрасывают props'ы дочерним, но может есть красивое решение как "законнектить" конкретный библиотечный компонент на конкретное хранилище приложения?

1 ответ 1

0

Не совсем понятно, в чём проблема в вашем конкретном примере. Компонент LoginForm должен получить все пропсы, которые он передаст дочерним компонентам. Можете описать интерфейс компонента TextInput и импортировать его в интерфейс LoginForm, это уменьшит количество писанины.

// TextInput.tsx
type TextInputProps = {
    hidden?: boolean;
    value?: string;
    error?: boolean;
    label?: string;
    onClick?: (e: React.SyntheticEvent<any>) => any;
};

// LoginForm.tsx
type LoginFormProps = {
    loginInput: TextInputProps;
    passwordInput: TextInputProps;
}

const Library_LoginForm: React.SFC<LoginFormProps> = props => (
    <div>
        <Library_TextInput {...props.loginInput} />
        <Library_TextInput {...props.passwordInput} />
      </div>
);

Однако, если разговор идёт о формах, то не лучше ли будет использовать redux-form или аналог.

4
  • Пример же тестовый. Да, можно сделать connect для LoginForm, а он уже передаст нужные props "ниже". Но, допустим, компонентам ниже нужны какие-то сложные данные из хранилища, логично их тоже приконнектить к хранилищу с помощью connect. Но как тогда компонент верхнего уровня узнает "connect-версию" компонента?
    – Pit
    15 янв 2018 в 20:43
  • обычный подход состоит в разделении компонентов на компоненты и контейнры, где первый тупые и просто рисуют интерфейс, а последний знают про стор, рутер и подобные вещи. компоненты легко вынести в отдельную библиотеку, контейнеры не получится, так как они составляют само приложение 15 янв 2018 в 22:42
  • А если одному компоненту нужно в своей работе использовать другой компонент. Он ведь не может использовать контейнер, так как ничего о нем не знает. Но и компонент без контейнера не обладает нужными данными. В этом и вопрос
    – Pit
    16 янв 2018 в 17:57
  • правильно, конечно, поэтому я и привёл пример выше как пропсы передаются сквозь компоненты, собственно не понянто в чём проблема :) 16 янв 2018 в 19:03

Ваш ответ

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

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