React.js条件渲染：生产环境如何优雅加载Sentry.ErrorBoundary

问题原因 #

JSX 不是普通的HTML模板字符串，编译后会被转换为React.createElement的嵌套函数调用，不支持单独拆分标签的开、闭合片段做条件判断，你之前尝试的分别输出开标签、闭标签的写法会直接触发语法错误，本质不符合JSX的编译规则。

推荐实现方案 #

方案1：抽离公共内容做条件判断（最常用，无额外依赖） #

把不需要重复编写的内部业务节点提前抽为变量，再通过三元表达式判断是否需要用Sentry.ErrorBoundary包裹该内容，完全避免重复代码：

// 抽离公共业务内容，只编写一次
const innerApp = (
  <Experiment>
    <Root />
  </Experiment>
);

ReactDOM.render(
  <Provider store={store}>
    {environment === 'PROD'
      ? <Sentry.ErrorBoundary>{innerApp}</Sentry.ErrorBoundary>
      : innerApp
    }
  </Provider>,
  document.getElementById('root')
);

这种写法逻辑直观，代码量小，适配绝大多数单一场景的条件包裹需求。注意判断环境时建议使用严格相等===，避免非严格相等的隐式类型转换导致判断失效。如果是Vite、Create React App等官方脚手架搭建的项目，可以直接使用脚手架内置的生产环境标识，比如Vite下用import.meta.env.PROD、CRA下用process.env.NODE_ENV === 'production'，不需要自行维护环境变量。

方案2：封装通用条件包裹组件（适合多场景复用） #

如果项目中存在多处需要条件包裹外层组件的需求，可以封装一个通用的ConditionalWrapper组件，减少重复逻辑：

// 通用条件包裹组件
const ConditionalWrapper = ({ condition, wrapper, children }) => {
  return condition ? wrapper(children) : children;
};

// 业务中使用
ReactDOM.render(
  <Provider store={store}>
    <ConditionalWrapper
      condition={environment === 'PROD'}
      wrapper={(childNodes) => <Sentry.ErrorBoundary>{childNodes}</Sentry.ErrorBoundary>}
    >
      <Experiment>
        <Root />
      </Experiment>
    </ConditionalWrapper>
  </Provider>,
  document.getElementById('root')
);

后续其他场景需要条件包裹外层组件时，只需要传入判断条件和包裹组件的渲染逻辑即可，不需要重复写三元判断。

内容的提问来源于stack exchange，提问作者Maria Jeysingh Anbu