javascript - 如何连接 JSX 而不会遇到 "single root"问题与 JSX

Question

我想知道如何在 JSX 中执行此操作。如果你看下面的代码，有重复的部分 <div className={`${cssComponentName}-container`}>设置用于包装 JSX。我如何在 if/else 循环和单个 return 语句之外执行此操作，而不会遇到 JSX 的“单根”问题。

buildComponent() {
const { element: {title, type, items }, name } = this.props;
const cssComponentName = name.toLowerCase();
if (type === 'string' || type === 'number') {
  return (
    <div className={`${cssComponentName}-container`}>
      <label htmlFor={name}>{title}</label>
      <input type="text" name={name} />
    </div>
  );
}

if (type === 'array') {
  return (
    <div className={`${cssComponentName}-container`}>
      <label htmlFor={name}>{title}</label>
      <select name={name}>
        { this.buildDropdown(items.enum, items.enumNames) }
      </select>
    </div>
  );
}

Answer 1

可以使用无状态函数将其重组为以下可能的形式。

buildComponent() {
  const { element: {title, type, items }, name } = this.props;
  const cssComponentName = name.toLowerCase();

  const DivWrapper = (props) => {
    return (
      <div className={`${cssComponentName}-container`}>
        <label htmlFor={name}>{title}</label>
       {props.children}
      </div>
    );
  };

  return (
    <DivWrapper>
    { (type === 'string' || type === 'number') ?
        <input type="text" name={name} /> :
      (type === 'array') ?
        <select name={name}>
          { this.buildDropdown(items.enum, items.enumNames) }
        </select> : null
    }
    </DivWrapper>
  );
}