加载组件时检查 props 是否未定义

Question

我有一个问题，关于检查功能组件中的 props 是否未定义以呈现一个屏幕或另一个屏幕。

我的功能组件：

const InfoHeader = ({population, infected, recovered, deaths, active}) => {
console.log(population)
    return(
        <div className="infoHeader-wrapper">
            ///code to render the information passed into the props
        </div>
    )
}

export default InfoHeader

我知道第一次加载的道具是未定义的，因为它们只有在用户与我创建的地图上的某个部分交互时才会获得值。

我的问题是：

而不是做类似

的事情

if(population !==undefined && infected !== undefined && ... )

是否有更好的方法来创建三元运算符以有条件地呈现功能组件中的一个或另一个元素'return？类似于：

return(
   allProps !== undefined ?? renderX : renderY
)

非常感谢

Answer 1

切换是一种可能

switch (expr) {
  case "Oranges":
    console.log("Oranges are [=10=].59 a pound.");
    break;
  case "Apples":
    console.log("Apples are [=10=].32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are [=10=].48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are .00 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are .79 a pound.");
    break;
  default:
    console.log("Sorry, we are out of " + expr + ".");
}

console.log("Is there anything else you'd like?");

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/switch

在你的情况下你可以这样使用它：

switch (population !==undefined && infected !== undefined) {
  case true:
    console.log('All is defined');
    break;
  case false:
    console.log('Not all is defined.');
    break;
  
  default:
    console.log('Default');
}

Answer 2

你可以这样做：

const bla = {
  population: null,
  infected: undefined,
  recovered: 1,
  deaths: true,
  active: 'yes'
}

const areAllTruthy = Object.values(bla).every(v => v !== null && v!== undefined)
console.log(areAllTruthy)

Answer 3

你可以创建一个函数，它接受验证所有值不是 undefined:

的道具

const InfoHeader = (props) => {
  const {population, infected, recovered, deaths, active} = props

  const propsValid = (props) => Object.values(props).every(prop => prop !== undefined)

  console.log(population)
  return(
    propsValid(props) ? renderX : renderY
  )
}

export default InfoHeader

Answer 4

如果问题是可读性，你也可以这样：

 const scenario = population !==undefined && infected !== undefined && ...
 return(
    scenario ? renderX : renderY
 )

加载组件时检查 props 是否未定义

Check if props are undefined when loading component

javascript

conditional-operator

reactjs

conditional-rendering