Пишем API для React компонентов, часть 5: просто используйте композицию

[Spunreal]

А потом появляется лейбл с заливкой и бейдж без заливки. Итого это один и тот же компонент с разным скруглением. Но зато есть 2 разных компонента, делающих одно и то же.

[string15]

Дублирование лучше неправильной абстракции — Sandi Metz

[token]

Ёмаё да сколькож можно то. Ну давайте уже кто нибудь запилит статью как сделать div на реакте?

[JustDont]

Нужно компонента три, думаю. Или даже лучше пять.

[DmitryKazakov8]

Непрофессиональный цикл статей, на мой взгляд. Даже в простейших примерах явные ошибки. То setState как будто синхронный, то текстовые пропы от руки каждый раз пишутся вместо констант, то вот label здесь без htmlFor. Если кто-то все же читает, лучше используйте такой паттерн:

<Input.Text
  label="Name"
  storePath="forms.registration.email"
/>

// и внутри компонента

const id = generateId(props.storePath);

return (
  <div>
    <label htmlFor={id}>{props.label}</label>
    <input type="text" id={id} value={getValueFromStore(props.storePath)}/>
  </div>
)

Акцент на автоматической генерации id, удобстве получения данных из стора, и фокусировании инпута при клике на label.

В примере storePath строкой задано, что при рефакторинге может вылезти в баг, поэтому тоже лучше генерировать storePath={pathToString(forms.registration.email)}

[DmitryKazakov8]

Хотя если проект на MobX то лучше storePath все же строкой, чтобы компонент формы не подписывался на обновление значения конкретных полей.

[mayorovp]

Линзы тогда уж надо использовать, притом типизированные, а не строки.

[DmitryKazakov8]

Напишете пример?

[mayorovp]

Начать можно с этого:

const expr_symbol = Symbol("Expr")
type Lens<R, T> = {
    get(root: R) : T,
    set(root: R, value: T): void,
}

type Expr<R, T> = (T extends object ? {
    readonly [K in keyof T]: Expr<R, T[K]>
} : {}) & {
    [expr_symbol]: Lens<R, T>
}

function expr<T>(root: T) : Expr<T, T> {
    const handler : ProxyHandler<PropertyKey[]> = {
        get(target, p, receiver) {
            if (p === expr_symbol) return createLens(target);
            return new Proxy(target.concat([p]), handler);
        },
    }

    return <any>new Proxy([], handler);

    function createLens(path: PropertyKey[]) : Lens<any, any> {
        throw "TODO";
    }
}

function lens<R, T>(expr: Expr<R, T>) :  Lens<R, T> {
    return expr[expr_symbol];
}

// ...

lens(expr(forms).registration.email);

[DmitryKazakov8]

Спасибо, вы правы, подход createProxy(store).registration.email.toString() / toString(createProxy(store).registration.email) может облегчить рефакторинг, если совпадут факторы: в проекте используется типизация, она сделана корректно, IDE ее понимает и корректно меняет параметры при рефакторинге.

В остальных случаях строка подходит отлично — findAndReplace 'store.registration.email' справится с той же скоростью и надежностью, пожалуй я перебдел в данном случае.