在组件中映射道具时，如何为道具 children 编写排除项？

Question

正在处理我的 D.R.Y。我正在尝试将 parent 的数据传递给 child 组件，以便我可以 re-use child 组件。给定 parent 组件我有：

<Child data="data">
  <svg viewBox={'0 0 500 500'}>
    <path d="path" />
  </svg>
  <p>This is some text</p>
</Child>

Child.js:

import React from 'react'
import Foo from '../Foo'
import { Container, Svg, Div, Text } from './ChildElements'

const Child = props => {
  return (
    <>
      <Container>
        {props.children.map((c, k) => {
          if (c.type === 'svg')
            return (
              <Svg key={k} viewBox={c.props.viewBox}>
                {c.props.children}
              </Svg>
            )
        })}
        <Div>
          {props.children.map((c, k) => {
            if (c.type === 'p') return <Text key={k}>{c.children}</Text>
          })}
          <Foo bar={props.data} />
        </Div>
      </Container>
    </>
  )
}
export default Child

child.js 硬编码：

import React from 'react'
import Foo from '../Foo'
import { Container, Svg, Div, Text } from './ChildElements'

const Child = ({data}) => {
  return (
    <>
      <Container>
        <Svg viewBox={'0 0 500 500'}><path d="path" /></Svg>
        <Div>
          <Text>Hard coded text</Text>
          <Foo bar={data} />
        </Div>
      </Container>
    </>
  )
}

export default Child

child 组件有效，但如果我从 Parent 中排除 Text (<p>This is some text</p>)，应用程序会抛出以下错误：

TypeError: props.children.map is not a function

并且在终端中出现 ESLint 错误：

Array.prototype.map() expects a value to be returned at the end of arrow function

如果我不知道 Parent?

研究：

Answer 1

这就是 React.Children.map 的创建目的。当提供多个 children 时，props.children 将是一个数组，并且您的代码有效。但是，当仅提供一个或不提供 children 时，props.children 将不是数组，导致您的代码需要考虑 none、一个或多个 [=29] 的每个变体=]. React.Children.map 像普通数组 map 一样工作，但可以优雅地处理这三种情况。

您可能还想查看 React.cloneElement 来处理您的元素创建代码，但在您的情况下，我认为您只想过滤一些元素，因此您可以 return他们。

    {React.Children.map(props.children, (c, k) => {
      if (c.type === 'svg')
        return c
    })}

还有一个 React.Children.toArray，如果您愿意，可以使用 filter。

最后，我应该指出，使用索引作为键是没有意义的。 React 已经使用顺序来识别 children。如果您通过提供索引作为键来加倍该功能，它不会改变行为。用于生成Svg元素的数据中应存储一个键，以便正确识别表示相同数据的Svg元素。

在组件中映射道具时，如何为道具 children 编写排除项？

How to write exclusion for props' children when mapping over them in a component?

reactjs

styled-components

children