如何在不遇到 JSX 的“单根”问题的情况下连接 JSX答案

【问题标题】：How to concatenate JSX without encountering the "single root" issue with JSX如何在不遇到 JSX 的“单根”问题的情况下连接 JSX
【发布时间】：2016-08-10 03:15:02
【问题描述】：

我想知道如何在 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>
  );
}

}

【问题讨论】：

标签： javascript reactjs react-jsx jsx

【解决方案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>
  );
}

【讨论】：

【解决方案2】：

你也可以试试这个方法：

buildElement(type, name, items) {
   if (type === 'string' || type === 'number') 
     return buildInput(name);
   else if (type === 'array')
         return  buildSelect(name, items);
}    

buildSelect(name, items) {
   return (<select name={name}>
            { this.buildDropdown(items.enum, items.enumNames) }
           </select>);
}    

buildInput(name) {
   return (<input type="text" name={name} />);
}    

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

  return (
    <div className={`${cssComponentName}-container`}>
    <label htmlFor={name}>{title}</label>
    {this.buildElement(type, name, items)}
    </div>
  );
}

【讨论】：