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

在开发一个组件需求中，需要对外部传入的 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';
}