javascript - 检查 Prop 时无法将组件分配给变量

Question

此代码有效:

import React from 'react'
import { MyComponent } from './components'


export const NewComponent = props => {
  const {
    isValid,
  } = props

  const UseComponent = MyComponent

  return (
    <>
        <UseComponent />
    </>
  )
}

但是这段代码不有效:

import React from 'react'
import { MyComponent } from './components'


export const NewComponent = props => {
  const {
    isSet,
  } = props

  const UseComponent = isSet && MyComponent

  return (
    <>
        <UseComponent />
    </>
  )
}

即，我正在尝试查看 Prop isSet 是否被使用。如果正在使用它，那么我想渲染该组件。如果不是，那就不是。

但是当我尝试将其分配给变量时，我收到以下错误消息:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

有没有办法将我的组件分配给一个变量，以便它在使用 prop 时呈现，但在不使用时不呈现？

Answer 1

isSet && MyComponent 断言为 boolean(强制转换)。使用三元运算符

const UseComponent = isSet ? MyComponent : React.Fragment

或者很好的旧if

let UseComponent = React.Fragment

if(isSet) UseComponent = MyComponent

但通常在像您这样的用例中，我们只使用条件渲染

return isSet ? <MyComponent /> : null