Como passar adereços para {this.props.children}

Estou tentando encontrar a maneira correta de definir alguns componentes que podem ser usados ​​de maneira genérica:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

Existe uma lógica em andamento para renderização entre componentes pai e filho, é claro, você pode imaginar <select>e <option>como um exemplo dessa lógica.

Esta é uma implementação fictícia para o objetivo da pergunta:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

A pergunta é sempre que você usa {this.props.children}para definir um componente de wrapper, como você transmite alguma propriedade para todos os seus filhos?

Clonando crianças com novos adereços

Você pode usar React.Children para iterar sobre os filhos e, em seguida, clonar cada elemento com novos adereços (mesclado superficialmente) usando React.cloneElement, por exemplo:

import React, { Children, isValidElement, cloneElement } from 'react';

const Child = ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}>Click Me</div>
);

function Parent({ children }) {
  function doSomething(value) {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    const childrenWithProps = Children.map(children, child => {
      // Checking isValidElement is the safe way and avoids a TS error too.
      if (isValidElement(child)) {
        return cloneElement(child, { doSomething })
      }

      return child;
    });

    return <div>{childrenWithProps}</div>
  }
};

ReactDOM.render(
  <Parent>
    <Child value="1" />
    <Child value="2" />
  </Parent>,
  document.getElementById('container')
);

Fiddle: https://jsfiddle.net/2q294y43/2/

Chamando crianças como uma função

Você também pode passar adereços para crianças com adereços de renderização . Nesta abordagem, os filhos (que podem ser childrenou qualquer outro nome de prop) são uma função que pode aceitar todos os argumentos que você deseja passar e retorna os filhos:

const Child = ({ doSomething, value }) => (
  <div onClick={() =>  doSomething(value)}>Click Me</div>
);

function Parent({ children }) {
  function doSomething(value) {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    // Note that children is called as a function and we can pass args to it
    return <div>{children(doSomething)}</div>
  }
};

ReactDOM.render(
  <Parent>
    {doSomething => (
      <React.Fragment>
        <Child doSomething={doSomething} value="1" />
        <Child doSomething={doSomething} value="2" />
      </React.Fragment>
    )}
  </Parent>,
  document.getElementById('container')
);

Em vez de <React.Fragment>ou simplesmente, <>você também pode retornar uma matriz, se preferir.

Fiddle: https://jsfiddle.net/ferahl/y5pcua68/7/

Para uma maneira um pouco mais limpa, tente:

<div>
    {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
</div>

Editar: Para usar com vários filhos individuais (o filho deve ser um componente), você pode fazer. Testado em 16.8.6

<div>
    {React.cloneElement(props.children[0], { loggedIn: true, testingTwo: true })}
    {React.cloneElement(props.children[1], { loggedIn: true, testProp: false })}
</div>

Tente isto

<div>{React.cloneElement(this.props.children, {...this.props})}</div>

Funcionou para mim usando o react-15.1.

Passe adereços para direcionar as crianças.

Veja todas as outras respostas

Passe dados globais compartilhados pela árvore de componentes via contexto

O contexto é projetado para compartilhar dados que podem ser considerados "globais" para uma árvore de componentes do React, como o usuário autenticado atual, tema ou idioma preferido. ¹

Isenção de responsabilidade: esta é uma resposta atualizada, a anterior usou a API de contexto antiga

É baseado no princípio Consumidor / Fornecer. Primeiro, crie seu contexto

const { Provider, Consumer } = React.createContext(defaultValue);

Em seguida, use via

<Provider value={/* some value */}>
  {children} /* potential consumers */
<Provider />

e

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

Todos os Consumidores descendentes de um Fornecedor serão renderizados novamente sempre que o valor do fornecedor for alterado. A propagação do Provedor para seus Consumidores descendentes não está sujeita ao método shouldComponentUpdate, portanto, o Consumidor é atualizado mesmo quando um componente ancestral fica fora da atualização. ¹

Exemplo completo, semi-pseudo-código.

import React from 'react';

const { Provider, Consumer } = React.createContext({ color: 'white' });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: { color: 'black' },
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

class Toolbar extends React.Component {
  render() {
    return ( 
      <div>
        <p> Consumer can be arbitrary levels deep </p>
        <Consumer> 
          {value => <p> The toolbar will be in color {value.color} </p>}
        </Consumer>
      </div>
    );
  }
}

¹ https://facebook.github.io/react/docs/context.html

Passando adereços para crianças aninhadas

Com a atualização para o React 16.6, agora você pode usar React.createContext e contextType .

import * as React from 'react';

// React.createContext accepts a defaultValue as the first param
const MyContext = React.createContext(); 

class Parent extends React.Component {
  doSomething = (value) => {
    // Do something here with value
  };

  render() {
    return (
       <MyContext.Provider value={{ doSomething: this.doSomething }}>
         {this.props.children}
       </MyContext.Provider>
    );
  }
}

class Child extends React.Component {
  static contextType = MyContext;

  onClick = () => {
    this.context.doSomething(this.props.value);
  };      

  render() {
    return (
      <div onClick={this.onClick}>{this.props.value}</div>
    );
  }
}


// Example of using Parent and Child

import * as React from 'react';

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <Child value={2} />
      </Parent>
    );
  }
}

React.createContext brilha onde o caso React.cloneElement não pode manipular componentes aninhados

class SomeComponent extends React.Component {

  render() {
    return (
      <Parent>
        <Child value={1} />
        <SomeOtherComp><Child value={2} /></SomeOtherComp>
      </Parent>
    );
  }
}

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 ...

A melhor maneira, que permite fazer a transferência de propriedade, é children como uma função

Exemplo:

export const GrantParent = () => {
  return (
    <Parent>
      {props => (
        <ChildComponent {...props}>
          Bla-bla-bla
        </ChildComponent>
      )}
    </Parent>
  )
}

export const Parent = ({ children }) => {
    const somePropsHere = { //...any }
    <>
        {children(somePropsHere)}
    </>
}

Eu precisava corrigir a resposta aceita acima para fazê-la funcionar usando isso em vez deste ponteiro. Isso no escopo da função map não tinha a função doSomething definida.

var Parent = React.createClass({
doSomething: function() {
    console.log('doSomething!');
},

render: function() {
    var that = this;
    var childrenWithProps = React.Children.map(this.props.children, function(child) {
        return React.cloneElement(child, { doSomething: that.doSomething });
    });

    return <div>{childrenWithProps}</div>
}})

Atualização: essa correção é para o ECMAScript 5, no ES6 não é necessário var que = isto

Maneira mais limpa considerando um ou mais filhos

<div>
   { React.Children.map(this.props.children, child => React.cloneElement(child, {...this.props}))}
</div>

Nenhuma das respostas aborda a questão de ter filhos que não são componentes do React, como seqüências de caracteres de texto. Uma solução alternativa pode ser algo como isto:

// Render method of Parent component
render(){
    let props = {
        setAlert : () => {alert("It works")}
    };
    let childrenWithProps = React.Children.map( this.props.children, function(child) {
        if (React.isValidElement(child)){
            return React.cloneElement(child, props);
        }
          return child;
      });
    return <div>{childrenWithProps}</div>

}

Você não precisa mais {this.props.children}. Agora você pode agrupar o componente filho usando renderin Routee passar seus adereços como de costume:

<BrowserRouter>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/posts">Posts</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>

    <hr/>

    <Route path="/" exact component={Home} />
    <Route path="/posts" render={() => (
      <Posts
        value1={1}
        value2={2}
        data={this.state.data}
      />
    )} />
    <Route path="/about" component={About} />
  </div>
</BrowserRouter>

Parent.jsx:

import React from 'react';

const doSomething = value => {};

const Parent = props => (
  <div>
    {
      !props || !props.children 
        ? <div>Loading... (required at least one child)</div>
        : !props.children.length 
            ? <props.children.type {...props.children.props} doSomething={doSomething} {...props}>{props.children}</props.children.type>
            : props.children.map((child, key) => 
              React.cloneElement(child, {...props, key, doSomething}))
    }
  </div>
);

Child.jsx:

import React from 'react';

/* but better import doSomething right here,
   or use some flux store (for example redux library) */
export default ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}/>
);

e main.jsx:

import React from 'react';
import { render } from 'react-dom';
import Parent from './Parent';
import Child from './Child';

render(
  <Parent>
    <Child/>
    <Child value='1'/>
    <Child value='2'/>
  </Parent>,
  document.getElementById('...')
);

veja o exemplo aqui: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview

Talvez você também considere útil esse recurso, embora muitas pessoas o considerem um antipadrão, ele ainda pode ser usado se você souber o que está fazendo e projetar bem sua solução.

Função como componentes filhos

Se você tem vários filhos aos quais deseja passar adereços , pode fazê-lo desta maneira, usando o mapa React.Children.map:

render() {
    let updatedChildren = React.Children.map(this.props.children,
        (child) => {
            return React.cloneElement(child, { newProp: newProp });
        });

    return (
        <div>
            { updatedChildren }
        </div>
    );
}

Se o seu componente está tendo apenas um filho, não há necessidade de mapeamento, basta clonar o elemento imediatamente:

render() {
    return (
        <div>
            {
                React.cloneElement(this.props.children, {
                    newProp: newProp
                })
            }
        </div>
    );
}

De acordo com a documentação do cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

Clone e retorne um novo elemento React usando o elemento como ponto de partida. O elemento resultante terá os adereços do elemento original com os novos adereços mesclados superficialmente. Novos filhos substituirão os existentes. key e ref do elemento original serão preservados.

React.cloneElement() é quase equivalente a:

<element.type {...element.props} {...props}>{children}</element.type>

No entanto, 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.

Portanto, cloneElement é o que você usaria para fornecer adereços personalizados para os filhos. No entanto, pode haver vários filhos no componente e você precisará fazer um loop sobre ele. O que outras respostas sugerem é que você as mapeie usando React.Children.map. No entanto, React.Children.mapao contrário das React.cloneElementalterações, as teclas do elemento anexado e extra .$como prefixo. Verifique esta pergunta para obter mais detalhes: React.cloneElement dentro de React.Children.map está causando alterações nas chaves dos elementos

Se você deseja evitá-lo, deve executar a forEachfunção como

render() {
    const newElements = [];
    React.Children.forEach(this.props.children, 
              child => newElements.push(
                 React.cloneElement(
                   child, 
                   {...this.props, ...customProps}
                )
              )
    )
    return (
        <div>{newElements}</div>
    )

}

Além da resposta @and_rest, é assim que clono as crianças e adiciono uma classe.

<div className="parent">
    {React.Children.map(this.props.children, child => React.cloneElement(child, {className:'child'}))}
</div>

Eu acho que um suporte de renderização é a maneira apropriada de lidar com esse cenário

Você permite que o pai forneça os adereços necessários usados ​​no componente filho, refatorando o código pai para se parecer com algo assim:

const Parent = ({children}) => {
  const doSomething(value) => {}

  return children({ doSomething })
}

Em seguida, no componente filho, você pode acessar a função fornecida pelo pai desta maneira:

class Child extends React {

  onClick() => { this.props.doSomething }

  render() { 
    return (<div onClick={this.onClick}></div>);
  }

}

Agora a estrutura do noivo ficará assim:

<Parent>
  {(doSomething) =>
   (<Fragment>
     <Child value="1" doSomething={doSomething}>
     <Child value="2" doSomething={doSomething}>
    <Fragment />
   )}
</Parent>

Método 1 - clonar crianças

const Parent = (props) => {
   const attributeToAddOrReplace= "Some Value"
   const childrenWithAdjustedProps = React.Children.map(props.children, child =>
      React.cloneElement(child, { attributeToAddOrReplace})
   );

   return <div>{childrenWithAdjustedProps }</div>
}

Método 2 - usar contexto compositável

O contexto permite que você transmita um suporte a um componente filho profundo sem transmiti-lo explicitamente como um suporte pelos componentes intermediários.

O contexto vem com desvantagens:

1. Os dados não fluem da maneira regular - via adereços.
2. Usar o contexto cria um contrato entre o consumidor e o provedor. Pode ser mais difícil entender e replicar os requisitos necessários para reutilizar um componente.

Usando um contexto compositável

export const Context = createContext<any>(null);

export const ComposableContext = ({ children, ...otherProps }:{children:ReactNode, [x:string]:any}) => {
    const context = useContext(Context)
    return(
      <Context.Provider {...context} value={{...context, ...otherProps}}>{children}</Context.Provider>
    );
}

function App() {
  return (
      <Provider1>
            <Provider2> 
                <Displayer />
            </Provider2>
      </Provider1>
  );
}

const Provider1 =({children}:{children:ReactNode}) => (
    <ComposableContext greeting="Hello">{children}</ComposableContext>
)

const Provider2 =({children}:{children:ReactNode}) => (
    <ComposableContext name="world">{children}</ComposableContext>
)

const Displayer = () => {
  const context = useContext(Context);
  return <div>{context.greeting}, {context.name}</div>;
};

A maneira mais eficiente de fazer isso:

    {React.cloneElement(this.props.children, this.props)}

Para qualquer pessoa que tenha um único elemento filho, isso deve ser feito.

{React.isValidElement(this.props.children)
                  ? React.cloneElement(this.props.children, {
                      ...prop_you_want_to_pass
                    })
                  : null}

É isso que você precisa?

var Parent = React.createClass({
  doSomething: function(value) {
  }
  render: function() {
    return  <div>
              <Child doSome={this.doSomething} />
            </div>
  }
})

var Child = React.createClass({
  onClick:function() {
    this.props.doSome(value); // doSomething is undefined
  },  
  render: function() {
    return  <div onClick={this.onClick}></div>
  }
})

Por alguma razão, o React.children não estava trabalhando para mim. Isto é o que funcionou para mim.

Eu queria apenas adicionar uma classe à criança. semelhante a alterar um suporte

 var newChildren = this.props.children.map((child) => {
 const className = "MenuTooltip-item " + child.props.className;
    return React.cloneElement(child, { className });
 });

 return <div>{newChildren}</div>;

O truque aqui é o React.cloneElement . Você pode aprovar qualquer suporte de maneira semelhante

Render adereços é a abordagem mais precisa para esse problema. Em vez de passar o componente filho para o componente pai como adereços filhos, deixe o pai renderizar o componente filho manualmente. Render é adereços embutidos no react, que recebe o parâmetro de função. Nesta função, você pode deixar o componente pai renderizar o que quiser com parâmetros personalizados. Basicamente, faz o mesmo que adereços filhos, mas é mais personalizável.

class Child extends React.Component {
  render() {
    return <div className="Child">
      Child
      <p onClick={this.props.doSomething}>Click me</p>
           {this.props.a}
    </div>;
  }
}

class Parent extends React.Component {
  doSomething(){
   alert("Parent talks"); 
  }

  render() {
    return <div className="Parent">
      Parent
      {this.props.render({
        anythingToPassChildren:1, 
        doSomething: this.doSomething})}
    </div>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <Parent render={
          props => <Child {...props} />
        }/>
    </div>;
  }
}

Exemplo no codepen

Ao usar componentes funcionais, você geralmente recebe o TypeError: Cannot add property myNewProp, object is not extensibleerro ao tentar definir novas propriedades props.children. Existe uma solução para isso clonando os adereços e depois a criança com os novos adereços.

const MyParentComponent = (props) => {
  return (
    <div className='whatever'>
      {props.children.map((child) => {
        const newProps = { ...child.props }
        // set new props here on newProps
        newProps.myNewProp = 'something'
        const preparedChild = { ...child, props: newProps }
        return preparedChild
      })}
    </div>
  )
}