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

React 4月前 48

要将布尔值作为 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>
  );
}