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

要将布尔值作为 props 传递给 React 中的组件,请将布尔值包裹在花括号中,例如 Child bool={true} />。 我们传递给组件的所有非字符串类型的道具都必须用大括号括起来。

function Child({bool}) {
  console.log(bool);

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

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

我们将 bool 属性传递给组件。

请注意 ,我们必须将 prop 包裹在花括号中。

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

function Child({bool}) {
  console.log(bool);

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

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

将 prop 作为 bool 传递与 bool={true} 相同。 但是,如果我们传递动态值(来自变量)或假布尔值作为 prop,则必须像在第一个代码片段中那样明确指定它。

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

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

然后,我们可以在子组件中解构和使用 bool 属性。

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

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 传递的值,无需将它们用大括号括起来。

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>
  );
}

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

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>
  );
}

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