如何连接 JSX 而不会遇到 JSX 的 "single root" 问题

Question

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

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>
  );
}

Answer 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>
  );
}

如何连接 JSX 而不会遇到 JSX 的 "single root" 问题

How to concatenate JSX without encountering the "single root" issue with JSX

javascript

jsx

reactjs

react-jsx