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

Check if a Prop was passed to a component in React

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

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

应用程序.js


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 没有传递给组件，它的值将为undefined.

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

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

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

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

应用程序.js


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 表达式均不呈现任何内容。

应用程序.js


<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

如果你需要检查一个 prop 是否在其 JSX 代码之外传递给了一个组件，将 prop 与undefined.

应用程序.js


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

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

如果 prop 等于undefined，那么它不会传递给组件，除非父组件显式地undefined为 prop 传递了一个值，这几乎是相同的。

–