React组件中如何避免重复代码实现Select的条件式包裹渲染？

不用提取新组件的话，有几种简洁的实现方式：

方式一：用变量存储重复的Select内容 #

先把Select的完整内容赋值给变量，再根据prop是否存在决定是否包裹父结构：

function YourComponent({ hasSpecialProp }) {
  const selectElement = (
    <Select
      // 写入所有Select的props与子元素
      options={options}
      value={selectedValue}
      onChange={handleChange}
    />
  );

  return (
    <>
      {hasSpecialProp ? (
        <div>
          <Form>{selectElement}</Form>
        </div>
      ) : selectElement}
    </>
  );
}

方式二：用工具函数封装包裹逻辑 #

如果需要多次复用这种条件包裹逻辑，可以在组件内部写一个简单的工具函数：

function YourComponent({ hasSpecialProp }) {
  const wrapWithFormIfNeeded = (element) => {
    return hasSpecialProp ? (
      <div>
        <Form>{element}</Form>
      </div>
    ) : element;
  };

  return wrapWithFormIfNeeded(
    <Select
      // 写入所有Select的props与子元素
      options={options}
      value={selectedValue}
      onChange={handleChange}
    />
  );
}

方式三：拆分条件渲染的父标签 #

直接针对父标签做条件判断，让Select作为中间共享内容，避免重复编写：

function YourComponent({ hasSpecialProp }) {
  return (
    <>
      {hasSpecialProp && (
        <div>
          <Form>
      )}
          <Select
            // 写入所有Select的props与子元素
            options={options}
            value={selectedValue}
            onChange={handleChange}
          />
      {hasSpecialProp && (
          </Form>
        </div>
      )}
    </>
  );
}

这种方式要注意JSX的标签配对规则，确保语法合法。

内容的提问来源于stack exchange，提问作者gene b.