Получение глубоких дочерних компонентов FormInput

Я все еще расширяю react-admin TabbedForm, и, поскольку мне нужен пользовательский макет, мне нужно получить доступ к FormInput в моем макете из TabbedForm, чтобы функция findTabsWithErrors хорошо работала с моим макетом.

Прямо сейчас эта функция пишет:

export const findTabsWithErrors = (
    state,
    props,
    collectErrorsImpl = collectErrors
) => {
    const errors = collectErrorsImpl(state, props);

    return Children.toArray(props.children).reduce((acc, child) => {
        const inputs = Children.toArray(child.props.children);

        if (inputs.some(input => errors[input.props.source])) {
            return [...acc, child.props.label];
        }

        return acc;
    }, []);
};

Ожидается, что FormInput компоненты будут ровно на 2 уровня ниже дочернего дерева.

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

Мне нужен способ получить все дочерние элементы, которые являются FormInput компонентами, вроде того, что мы делаем с DOM, независимо от того, насколько глубоко они вложены.

Так как же реагировать на это? Должен ли я использовать рефы? Я не знаю...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
81
2

Ответы 2

Это то, над чем я давно хочу поработать, так как я не удовлетворен нашей текущей реализацией. Я думаю, что есть два способа сделать это:

Можно было бы полагаться на React Context с компонентами FormTab, предоставляющими методы для входных данных для регистр (эй, я принадлежу тебе, FormTab). Тем не менее, я думаю, что это как бы ломает поток реакции только сверху вниз.

Другим будет дубликат информация о том, какие входы к чему относятся FormTab, может быть, реквизит fields, который будет массивом имен входов на этой вкладке. Однако это затруднило бы динамическую форму.

В крайнем случае вам придется реализовать свой собственный TabbedForm

Я реализовал свой собственный TabbedForm, но это так противно... Это копия react-admin с другим циклом получения входных данных.

Armel Larcier 22.02.2019 11:41

Я подумал о том, чтобы регистрировать входы на вкладке, я думаю, это будет довольно простой API. Я надеюсь, что у меня будет время попробовать реализацию. Другим грязным способом было бы пройтись по дочерним элементам сверху-> вниз, пока не будет достигнута максимальная глубина, и искать свойство source или какое-либо другое пользовательское свойство. Но это тоже не "чисто".

Armel Larcier 22.02.2019 11:44

есть ли прогресс в этом вопросе?

Armel Larcier 28.05.2020 10:21

Вы придумали новые идеи? Я реализовал CustomForm, который передает функцию renderInput своим дочерним элементам, чтобы макет мог быть любым, который я хочу. Он также может регистрировать входные данные, я готов это реализовать, но мне нужны указатели, так как я не знаю, как использовать контексты реагирования. Есть ли уже контекст формы, который я должен использовать? Или компоненты с похожим поведением в ra, из которых я мог бы черпать вдохновение?

Armel Larcier 28.05.2020 10:25

Нет, и это, вероятно, произойдет только в следующей основной версии.

Gildas Garcia 05.06.2020 11:36

Я написал библиотеку, которая может помочь вам в этом случае.

https://fernandopasik.com/react-children-utilities/deep-filter

const inputs = deepFilter(props.children, child => child.type === 'input')

Другие вопросы по теме