如何条件渲染特定JSX元素？及解决给定React代码中组件嵌套子元素的无依赖问题

嘿，我来帮你搞定这个问题！你现在的代码之所以跑不起来，核心问题在于你把直接的JSX元素赋值给了Component变量，然后试图像使用组件那样给它传递子元素，但不管是自闭合的<div />还是初始的<React.Fragment />，都没有接收并渲染子元素的逻辑。下面给你几个不用额外安装库的解决方案：

方案一：把Component定义为接收children的函数组件 #

这是最直观的方式，让Component变成一个能处理子元素的小组件，根据条件渲染对应的容器并包裹子元素：

import * as React from 'react';

const isMobile = true;

const App = () => {
  const swipeStart = React.useCallback(() => {}, []);
  const swipeMove = React.useCallback(() => {}, []);

  // 定义成接收children的函数组件
  const Component = isMobile
    ? ({ children }) => <div onTouchStart={swipeStart} onTouchMove={swipeMove}>{children}</div>
    : ({ children }) => <React.Fragment>{children}</React.Fragment>;

  return (
    <Component>
      <span>child</span>
    </Component>
  );
}

这样Component就可以像普通组件一样接收子元素，不管是移动端的div还是非移动端的Fragment，都会正确把<span>child</span>渲染进去。

方案二：直接在return中条件渲染（适合子元素较少的场景） #

如果你的子元素不多，也可以不用单独定义Component变量，直接在return里完成条件判断并包裹子元素，避免重复代码的话可以把子元素抽成变量：

import * as React from 'react';

const isMobile = true;

const App = () => {
  const swipeStart = React.useCallback(() => {}, []);
  const swipeMove = React.useCallback(() => {}, []);
  
  // 抽离子元素，避免重复书写
  const childElement = <span>child</span>;

  return (
    isMobile ? (
      <div onTouchStart={swipeStart} onTouchMove={swipeMove}>
        {childElement}
      </div>
    ) : (
      <React.Fragment>
        {childElement}
      </React.Fragment>
    )
  );
}

这种方式代码更直白，适合简单场景。

方案三：使用React.cloneElement克隆元素并传入子元素 #

React提供了React.cloneElement方法，可以克隆已有的JSX元素，并给它添加props或者子元素，正好适合你的场景：

import * as React from 'react';

const isMobile = true;

const App = () => {
  const swipeStart = React.useCallback(() => {}, []);
  const swipeMove = React.useCallback(() => {}, []);

  // 先定义基础元素
  const baseElement = isMobile
    ? <div onTouchStart={swipeStart} onTouchMove={swipeMove} />
    : <React.Fragment />;

  // 克隆元素并传入子元素
  return React.cloneElement(baseElement, null, <span>child</span>);
}

这个方法不需要改变元素的定义方式，通过克隆的方式把子元素注入进去，非常灵活。

备注：内容来源于stack exchange，提问作者Mike K