Mamy przykładowy komponent Reacta:
class InputName extends React.Component { // machanie łopatą
constructor(props) { // ...
super(props) // ...
this.onChange = this.onChange.bind(this) // ...
} // ...
// ...
onChange(e) { // ...
this.props.onChange(e.target.value) // ...
} // machania łopatą koniec
render() { // meritum problemu
return (<span> // ...
<label htmlFor='inputName'>Please enter your name: </label> // ...
<input id='inputName' value={this.props.value} onChange={this.onChange} /> // ...
</span>) // ...
} // tyle
(tak, wiem - tu da się ten problem obejść zawierając input w label i w ten sposób uniknąć konieczności użycia atrubutu id, ale nie zawsze tak się da)
Powyższy kod jest prawidłowy tylko wtedy, jeżeli żaden inny tag HTML na danej stronie nie będzie miał atrybutu id wynoszącego inputName. W szczególności komponent InputName nie może być dwukrotnie użyty.
Czy można to zakładać? Programista może o tym wiedzieć, ale czy "komponent" może o tym wiedzieć? O ile dobrze rozumiem enkapsulację, to komponent nie powinien zakładać, jak będzie użyty, inaczej mamy niepożądany tight coupling.
Rozwiązania tego problemu widzę dwa...
Po pierwsze, można w komponencie generować jakiś UUID i prefixować wartość atrybutu id tym UUID. Tak bym chciał zrobić, ale StackOverflow bardzo naciska, że nie wolno generować UUID za pomocą Math.random(), trzeba użyć kryptograficznie bezpiecznego generatora liczb pseudolosowych, a tak się składa, że jest on dostępny wyłącznie wtedy, gdy strona idzie po https, trudno więc zakładać, że zawsze będzie go można użyć.
Po drugie, można przyjmować jakiś prefiks w argumentach komponentu, wtedy niech kod, który tworzy nasz komponent, martwi się, by zduplikowanym komponentom dać różne prefiksy. Ale czy to jest szeroko przyjęte rozwiązanie? Bo jeśli nie, to będzie tylko konfudować ludzi.
Jak się najczęściej rozwiązuje tego rodzaju problemy?
