Reactコンポーネントに値のないpropsを渡す方法

値のないpropsをコンポーネントに渡す場合、単にそのプロパティ名を指定するだけで済みます。以下に例を示します。

// 親コンポーネント
import React from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
  return <ChildComponent propA propB propC />;
}
export default ParentComponent;
// 子コンポーネント
import React from 'react';
function ChildComponent(props) {
  console.log(props.propA); // true
  console.log(props.propB); // true
  console.log(props.propC); // true
  return <div>Child Component</div>;
}
export default ChildComponent;

上記の例では、親コンポーネントから子コンポーネントにpropA、propB、propCという名前のプロパティを渡しています。これらのプロパティには値がなく、単にプロパティ名のみが指定されています。

子コンポーネント内でpropsオブジェクトを参照すると、値のないpropsにはtrueが与えられていることがわかります。

以上が、Reactコンポーネントに値のないpropsを渡す方法です。この方法を使えば、必要に応じて値のないpropsをコンポーネントに渡すことができます。