React: Los accesorios requeridos proporcionados con cloneElement aún muestran una advertencia en la consola
Hice un ejemplo para que sea más fácil de entender, pero básicamente se muestra una advertencia en la consola porque "faltan los accesorios necesarios".
Los accesorios se le dan al elemento con React.cloneElement por lo que no esperaba recibir una advertencia de los accesorios faltantes. Sin embargo, entiendo que este podría ser un caso límite ...
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 comentarios
Esto es intencional; validar los accesorios en el momento de la creación del elemento produce errores más útiles. También se asemeja más al comportamiento de sistemas de tipo estático como Flow. Lo mejor por ahora es simplemente marcar esos accesorios como opcionales. También podemos introducir una característica en el futuro llamada contexto que brindará otra forma compatible de pasar accesorios de un padre como A a un hijo como B.
sophiebits
en 27 jul. 2015
Es lo que pensaba. Gracias @spicyj
tleunen
en 27 jul. 2015
No sé cuál fue su caso de uso real @tleunen , pero me encontré con este problema al implementar un componente reutilizable que tenía la responsabilidad de pasar accesorios a sus hijos:
ReactDOM.render(
<NumberSelector>
<ComponentRequiringTheNumber />
</NumberSelector>
)
Al final, resolví el problema con lo que encontré es una solución más elegante:
ReactDOM.render(
<NumberSelector>
{({number}) => <ComponentRequiringTheNumber number={number} />}
</NumberSelector>
)
Me gusta mucho más porque la dependencia de ComponentRequiringTheNumber es explícita y el papel de NumberSelector hace evidente. Y de esta manera, los apoyos otorgados al componente anidado solo se evalúan cuando es relevante.
Aplicado a tu violín: https://jsfiddle.net/ap1e9rk3/1/
micaste
en 1 mar. 2017
Temas relacionados
UnbearableBear
·
3Comentarios
jimfb
·
3Comentarios
kocokolo
·
3Comentarios
vignestion
·
3Comentarios
Prinzhorn
·
3Comentarios
Comentario más útil
No sé cuál fue su caso de uso real @tleunen , pero me encontré con este problema al implementar un componente reutilizable que tenía la responsabilidad de pasar accesorios a sus hijos:
Al final, resolví el problema con lo que encontré es una solución más elegante:
Me gusta mucho más porque la dependencia de
ComponentRequiringTheNumberes explícita y el papel deNumberSelectorhace evidente. Y de esta manera, los apoyos otorgados al componente anidado solo se evalúan cuando es relevante.Aplicado a tu violín: https://jsfiddle.net/ap1e9rk3/1/