reactjs / reactjs/react.dev

[Docs] Add Example For React.Children.map

Aberta
#2,027 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
1d 11h
PRs com merge (30d)
11

Descrição

For https://reactjs.org/docs/react-api.html#reactchildrenmap to help illustrate as to what it does, can we kindly add an example for something like this.

const Value = ({ value }) => <p>{value}</p>

const PropsInjector = ({ children }) => React.Children.map(children, child => {
  return React.cloneElement(child, { value: 'some_value'  });
});

const App = () => (
   <PropsInjector>
        <Value />
        <Value />
    </PropsInjector>
)

I don't know if this might be an acceptable example for React.Children.map, but I would love to hear some feedback if possible.

The current documentation doesn't have a an example on how React.Children.map can be used & it doesn't make sense for someone like me

As per docs: React.Children.map(children, function[(thisArg)])

For someone like me I got very confused function[(thisArg)] when I read this & didn't know on how I could use it.

I am more then happy to make a PR for adding this example & or any better example if someone can suggest.

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece pela seção React.Children.map da página de documentação vinculada na issue e revise a explicação existente da API e os exemplos. Adicione um exemplo claro de uso do React baseado no cenário solicitado de injeção de props em child, com uma redação que explique o argumento do callback; estará concluído quando a página demonstrar como React.Children.map pode ser usado sem a confusão atual.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
documentation
Tipo de issue
Documentação
Dificuldade
2/5
Tempo estimado
1-3 horas
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
55/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.