变量的行为很奇怪-React服务器端渲染

Question

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

在情况1中：我得到了正确的行为，strangeComponent得到了空值

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

在情况2:strangeComponent获取组件值，表现为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((函数中呈现strangeComponent。这两个变量都在箭头函数中声明。

Answer 1

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