将布尔值作为 Props 传递给 React 中的组件

作者

将布尔值作为 Props 传递给 React 中的组件

Passing booleans as Props to a Component in React

要将布尔值作为 props 传递给 React 中的组件，请将布尔值包裹在花括号中，例如<Child bool={true} />. 您传递给组件的所有非类型string属性都必须用大括号括起来。

应用程序.js
function Child({bool}) {
  console.log(bool);

  return <div>{bool && <h2>Hello world</h2>}</div>;
}

export default function App() {
  return (
    <div>
      <Child bool={true} />
    </div>
  );
}

我们将一个boolprop 传递给了一个组件。请注意，我们必须将 prop 包裹在花括号中。

您可能还会在网上看到仅使用道具名称传递布尔道具的示例。

应用程序.js
function Child({bool}) {
  console.log(bool);

  return <div>{bool && <h2>Hello world</h2>}</div>;
}

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

传递道具 asbool与 相同bool={true}。但是，如果您传递动态值（来自变量）或false布尔值作为 prop，则必须像在第一个代码片段中那样明确指定它。

所有非类型的道具string在传递时都必须用花括号括起来。

花括号语法让 React 知道有一个表达式必须求值。

然后，您可以bool在子组件中解构和使用 prop。

将对象或数组作为 props 传递时，必须使用相同的方法。

应用程序.js
function Child({bool, obj, arr}) {
  console.log(bool);

  return (
    <div>
      <div>{bool && <h2>Hello world</h2>}</div>

      <h2>name: {obj.name}</h2>

      <h2>color: {arr[0]}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Child bool={true} obj={{id: 1, name: 'Bob'}} arr={['blue', 'green']} />
    </div>
  );
}

请注意，当我们将一个对象作为道具传递时，我们使用了两组大括号。

第一组标记表达式的开始，第二组是实际对象。

字符串是唯一可以作为 props 传递的值，无需将它们用大括号括起来。

应用程序.js
function Child({str, bool, obj, arr}) {
  console.log(bool);

  return (
    <div>
      <h2>{str}</h2>

      <div>{bool && <h2>Hello world</h2>}</div>

      <h2>name: {obj.name}</h2>

      <h2>color: {arr[0]}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Child
        str="Some content"
        bool={true}
        obj={{id: 1, name: 'Bob'}}
        arr={['blue', 'green']}
      />
    </div>
  );
}

您也可以将字符串用花括号括起来以保持一致，但这不是必需的。

应用程序.js
function Child({str, bool, obj, arr}) {
  console.log(bool);

  return (
    <div>
      <h2>{str}</h2>

      <div>{bool && <h2>Hello world</h2>}</div>

      <h2>name: {obj.name}</h2>

      <h2>color: {arr[0]}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Child
        str={'Some content'}
        bool={true}
        obj={{id: 1, name: 'Bob'}}
        arr={['blue', 'green']}
      />
    </div>
  );
}

如果您使用模板字符串或某些逻辑来构造字符串，则必须将其用大括号括起来。

–