变量行为奇怪 - React 服务器端渲染答案

【问题标题】：Variables behaves strange - React Server Side Rendering变量行为奇怪 - React 服务器端渲染
【发布时间】：2020-09-29 09:41:21
【问题描述】：

我在 SSR React 应用程序中的箭头函数内的条件运算符有一个非常奇怪的问题。我想做的基本上是有条件地将组件加载到变量中，但我得到的是非常奇怪的变量/条件行为。

情况 1：我得到正确的行为，而奇怪的组件得到空值

const isClient = false;
const strangeComponent = false ? (<Field
   name={name}
   isMulti
   component={({ input, ...rest }) => (
     <Select {...input} {...rest} searchable />)}
   closeMenuOnSelect={false}
   options={allSkills}
/>) : null;

案例2：奇怪的组件获取组件值，isClient的行为设置为true，但不是。

const isClient = false;
const strangeComponent = isClient ? (<Field
   name={name}
   isMulti
   component={({ input, ...rest }) => (
     <Select {...input} {...rest} searchable />)}
   closeMenuOnSelect={false}
   options={allSkills}
/>) : null;

我应该指出 isClient 没有在代码中的任何其他地方声明，然后在 return() 函数中呈现了奇怪的组件。这两个变量都在箭头函数中声明。

【问题讨论】：

我现在怀疑的是我的 SSR 配置仍然通过三元运算符的两个部分运行并评估它们（由于缺少窗口对象而导致
能否给出你调用奇异组件的代码部分，以及你提到的箭头函数
对不起，我已经找到了答案 - 我需要有条件地导入

标签： javascript reactjs server-side-rendering conditional-operator arrow-functions

【解决方案1】：

实际上三元运算符工作正常，问题在于导入在 SSR 上评估的组件，无论是否渲染。答案是通过 require() 有条件地导入它。

【讨论】：