Question

我想知道如何在JSX中执行此操作。如果你看下面的代码，有一些重复的部分，其中<div className={`${cssComponentName}-container`}>被设置用于包装JSX。如何在if / else循环和单个return语句之外执行此操作而不会遇到＆＃34;单根＆＃34; 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>
  );
}

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而不遇到＆＃34;单根＆＃34; JSX的问题

2 个答案: