Reagir de forma indeterminada

Eu me apaixonei pelo React.js e pelo JSX ao longo dos anos; a renderização baseada em estado e um fluxo de trabalho lógico me fizeram ver a luz dessa estrutura moderna. Isso não significa que às vezes eu não fique um pouco frustrado com o fato de as coisas “simples” parecerem mais difíceis do que deveriam. Obter uma referência a um elemento e modificar suas propriedades costumava ser simples, mas agora é preciso levar em conta que o usuário não costuma ter referências a elementos – é preciso pensar de uma maneira diferente. Aprendi isso quando precisei definir a propriedade de uma caixa de seleção inderterminate uma propriedade que não é reconhecida por meio de um atributo e que requer um controle sobre o elemento e a definição de uma propriedade diretamente.

Para adicionar a propriedade indeterminate à caixa de seleção, precisei aproveitar as vantagens da propriedade ref :

const { value, checked, indeterminate } = this.props

return render(
    <input
        type="checkbox"
        value={value}
        checked={checked}
        ref={el => el && (el.indeterminate = indeterminate)}
    />
)

Como o ref é executado em cada renderização, o indeterminate é atualizada adequadamente e, portanto, a caixa de seleção aparece como esperado.

Independentemente de quão incrível sua estrutura pareça, sempre há um ponto cego que exige um pouco de hack para realizar o que é esperado. Mas é isso que uma estrutura faz: fornece 99% do que o senhor precisa e torna o 1% difícil!