检查 Prop 是否传递给 React 中的组件

React 12月前 19

在 React 中检查一个 prop 是否传递给了一个组件：

将 prop 与 undefined 进行比较。
如果 prop 等于 undefined，则它不会传递给组件。
否则，它被传递给组件了。

const Button = ({withIcon}) => {
  if (withIcon !== undefined) {
    console.log('prop was passed');
  } else {
    console.log('prop was NOT passed');
  }

  return <button>Click {withIcon ? '▶️' : null}</button>;
};

export default function App() {
  return (
    <div>
      <Button />
    </div>
  );
}

Button 组件采用 withIcon 属性。

如果 prop 没有传递给组件，它的值将是未定义的。

在我们的 JSX 代码中，我们可以使用三元运算符来检查 prop 是否传递给了组件。

三元运算符与 if/else 语句非常相似。

它检查问号左边的值是否为真，如果是，运算符返回冒号左边的值，否则返回右边的值。

我们还可以使用逻辑与 && 运算符来检查我们的 JSX 代码中是否传递了 prop。

const Button = ({withIcon}) => {
  if (withIcon !== undefined) {
    console.log('prop was passed');
  } else {
    console.log('prop was NOT passed');
  }

  return <button>Click {withIcon && '▶️'}</button>;
};

如果左边的值为真，则逻辑 AND && 运算符返回右边的值。

我们可以使用这种方法，因为布尔值、null 和 undefined 都被忽略了。他们根本不渲染。

以下 JSX 表达式均不呈现任何内容。

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

如果我们需要检查一个 prop 是否在其 JSX 代码之外传递给了一个组件，请将 prop 与 undefined 进行比较。

const Button = ({withIcon}) => {
  if (withIcon !== undefined) {
    console.log('prop was passed');
  } else {
    console.log('prop was NOT passed');
  }

  return <button>Click {withIcon && '▶️'}</button>;
};