Как стать автором
Обновить

Комментарии 10

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

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

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

Непрофессиональный цикл статей, на мой взгляд. Даже в простейших примерах явные ошибки. То 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)}

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

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


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

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

Публикации