将数字作为 Props 传递给 React 中的组件

作者

在 React 中将数字作为 Props 传递给组件

Passing numbers as Props to a Component in React

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

应用程序.js
function Child({num}) {
  return (
    <div>
      <h2>the Number is: {num}</h2>
    </div>
  );
}

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

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

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

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

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

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

应用程序.js
function Child({num, obj, arr}) {
  return (
    <div>
      <h2>the Number is: {num}</h2>

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

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

export default function App() {
  return (
    <div>
      <Child num={42} obj={{name: 'Alice'}} arr={['a', 'b', 'c']} />
    </div>
  );
}

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

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

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

应用程序.js
function Child({str, num, obj, arr}) {
  return (
    <div>
      <h2>the String is: {str}</h2>

      <h2>the Number is: {num}</h2>

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

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

export default function App() {
  return (
    <div>
      <Child
        str="Hello world"
        num={42}
        obj={{name: 'Alice'}}
        arr={['a', 'b', 'c']}
      />
    </div>
  );
}

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

应用程序.js
function Child({str, num, obj, arr}) {
  return (
    <div>
      <h2>the String is: {str}</h2>

      <h2>the Number is: {num}</h2>

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

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

export default function App() {
  return (
    <div>
      <Child
        str={'Hello world'}
        num={42}
        obj={{name: 'Alice'}}
        arr={['a', 'b', 'c']}
      />
    </div>
  );
}

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

–