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

Question

Я все еще расширяю response-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, независимо от того, насколько глубоко они вложены.

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

Answer 1

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

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

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

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