React: Os adereços necessários fornecidos com cloneElement ainda exibem um aviso no console
Fiz um exemplo para ser mais fácil de entender, mas basicamente um aviso é exibido no console por causa da "falta de acessórios necessários".
Os adereços são dados ao elemento com React.cloneElement então eu não esperava receber um aviso de adereços ausentes. Eu entendo que este pode ser um caso extremo ...
https://jsfiddle.net/kdsvgbzu/1/
<A name="name" value="value">
<B></B>
</A>
class A extends React.Component {
render() {
return (
<div>
{React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, {
name: this.props.name,
value: this.props.value
});
}, this)}
</div>
);
}
}
A.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
};
class B extends React.Component {
render() {
return <span>{this.props.name} : {this.props.value}</span>;
}
}
B.propTypes = {
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired
};
tleunen
Todos 3 comentários
Isso é intencional; validar adereços no momento da criação do elemento produz erros mais úteis. Ele também se aproxima mais do comportamento de sistemas de tipo estático como o Flow. O melhor por enquanto é simplesmente marcar esses adereços como opcionais. Também podemos introduzir um recurso no futuro chamado contexto, que fornecerá outra maneira compatível de passar acessórios de um pai como A para uma criança como B.
sophiebits
em 27 jul. 2015
Isso foi o que eu pensei. Obrigado @spicyj
tleunen
em 27 jul. 2015
Não sei qual foi o seu caso de uso real @tleunen , mas me deparei com esse problema ao implementar um componente reutilizável que tinha a responsabilidade de passar acessórios para seus filhos:
ReactDOM.render(
<NumberSelector>
<ComponentRequiringTheNumber />
</NumberSelector>
)
No final, resolvi o problema com o que descobri ser uma solução mais elegante:
ReactDOM.render(
<NumberSelector>
{({number}) => <ComponentRequiringTheNumber number={number} />}
</NumberSelector>
)
Eu gosto muito mais, pois a dependência de ComponentRequiringTheNumber é explícita e o papel de NumberSelector se torna aparente. E dessa forma, os adereços dados ao componente aninhado são avaliados apenas quando for relevante.
Aplicado ao seu Fiddle: https://jsfiddle.net/ap1e9rk3/1/
micaste
em 1 mar. 2017
Questões relacionadas
krave1986
·
3Comentários
DimitarChristoff
·
3Comentários
UnbearableBear
·
3Comentários
zpao
·
3Comentários
hnordt
·
3Comentários
Comentários muito úteis
Não sei qual foi o seu caso de uso real @tleunen , mas me deparei com esse problema ao implementar um componente reutilizável que tinha a responsabilidade de passar acessórios para seus filhos:
No final, resolvi o problema com o que descobri ser uma solução mais elegante:
Eu gosto muito mais, pois a dependência de
ComponentRequiringTheNumberé explícita e o papel deNumberSelectorse torna aparente. E dessa forma, os adereços dados ao componente aninhado são avaliados apenas quando for relevante.Aplicado ao seu Fiddle: https://jsfiddle.net/ap1e9rk3/1/