react 组件 children 传入字符串和变量变成数组的问题

chat

在开发一个组件需求中,需要对外部传入的 children 判断类型,当类型为 string 时需要针对文本单独处理,发现 外部传入的 children 是 文本+变量 的形式时,组件内拿到的 children 是个数组,导致 类型判断 string 为 false,没有走到处理文本的逻辑。

const Test = ({children}) => {
  console.log(typeof children); // children
  return <div>{children}</div>
}

function App() {
  const [test, setTest] = useState('在状态中的文本')

  return <>
    <Test>仅有静态文本</Test>
    <Test>静态文本+变量{test}</Test>
    <Test>{test}</Test>
  </>
}

在 JSX 中,当我们在组件标签的内容中传递多个表达式、变量或文本时,React 会将它们作为数组对待。以下是一些常见的情况,会导致 JSX 中的内容被转换为数组:

  1. 多个表达式或变量:
<MyComponent>{variable1} {variable2}</MyComponent>

在这个例子中,variable1 variable2 是两个独立的表达式或变量,它们会被作为数组的两个元素传递给 MyComponent 组件。

  1. 文本和表达式或变量的混合:
<MyComponent>Some text {variable}</MyComponent>

在这个例子中,文本 "Some text " 和变量 variable 会被作为数组的两个元素传递给 MyComponent 组件。

  1. 使用数组提供多个子元素:
<MyComponent>
  {[
    <ChildComponent1 />,
    <ChildComponent2 />,
    <ChildComponent3 />
  ]}
</MyComponent>

在这个例子中,我们使用了数组来提供多个子元素,每个子元素都是一个组件。这些子元素会作为数组的元素传递给 MyComponent 组件。

在 JSX 中传递单个表达式、变量或文本,它们不会被转换为数组。只有在上述情况下,JSX 中的内容才会被转换为数组形式。

改造方案:

typeof children === 'string' 这个简单的判断改为下方的 判断,确保 每一项都是 string 或者 number 即可。

export const checkIsText = (el: ReactNode):boolean => {
  if (Array.isArray(el) && el.length !== 0) {
    return el.every((item) => typeof item === 'string' || typeof item === 'number');
  }
  return typeof el === 'string' || typeof el === 'number';
}

本文通过 YUQUE WORDPRESS 同步自语雀

版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/3197/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
react 组件 children 传入字符串和变量变成数组的问题
在开发一个组件需求中,需要对外部传入的 children 判断类型,当类型为 string 时需要针对文本单独处理,发现 外部传入的 children 是 文本+变量 的形式……
<<上一篇
下一篇>>
chat