Você pode usar React.cloneElement
, é melhor saber como funciona antes de começar a usá-lo em seu aplicativo. É introduzido React v0.13
, continue a ler para obter mais informações; portanto, algo junto com este trabalho para você:
<div>{React.cloneElement(this.props.children, {...this.props})}</div>
Portanto, traga as linhas da documentação do React para que você entenda como tudo está funcionando e como você pode usá-las:
No React v0.13 RC2, apresentaremos uma nova API, semelhante ao React.addons.cloneWithProps, com esta assinatura:
React.cloneElement(element, props, ...children);
Diferentemente de cloneWithProps, essa nova função não possui nenhum comportamento mágico incorporado para mesclar estilo e className pelo mesmo motivo pelo qual não temos esse recurso de transferPropsTo. Ninguém sabe ao certo qual é exatamente a lista completa de coisas mágicas, o que dificulta o raciocínio sobre o código e a reutilização quando o estilo tem uma assinatura diferente (por exemplo, no próximo React Native).
React.cloneElement é quase equivalente a:
<element.type {...element.props} {...props}>{children}</element.type>
No entanto, diferentemente do JSX e do cloneWithProps, ele também preserva refs. Isso significa que, se você conseguir um filho com um juiz, não o roubará acidentalmente do seu antepassado. Você receberá a mesma referência anexada ao seu novo elemento.
Um padrão comum é mapear seus filhos e adicionar um novo suporte. Houve muitos problemas relatados sobre cloneWithProps perdendo a ref, dificultando o raciocínio sobre seu código. Agora, seguir o mesmo padrão com cloneElement funcionará como esperado. Por exemplo:
var newChildren = React.Children.map(this.props.children, function(child) {
return React.cloneElement(child, { foo: true })
});
Nota: React.cloneElement (child, {ref: 'newRef'}) substitui a ref, portanto ainda não é possível que dois pais tenham uma ref para o mesmo filho, a menos que você use callback-refs.
Esse foi um recurso crítico para entrar no React 0.13, pois os objetos agora são imutáveis. O caminho de atualização geralmente é para clonar o elemento, mas, ao fazer isso, você pode perder a referência. Portanto, precisávamos de um caminho de atualização melhor aqui. Ao atualizar os callites no Facebook, percebemos que precisávamos desse método. Recebemos o mesmo feedback da comunidade. Por isso, decidimos fazer outro RC antes do lançamento final para garantir isso.
Planejamos eventualmente descontinuar React.addons.cloneWithProps. Ainda não estamos fazendo isso, mas esta é uma boa oportunidade para começar a pensar em seus próprios usos e considerar o uso de React.cloneElement. Certificar-se-emos de enviar uma liberação com avisos de descontinuação antes de removê-la, para que nenhuma ação imediata seja necessária.
mais aqui ...