将数组作为 prop 传递给 React.js 中的组件

作者

将数组作为 prop 传递给 React.js 中的组件

Pass an Array as prop to a component in React.js

要将数组作为 prop 传递给 React 中的组件，请将数组包裹在花括号中，例如<Books arr={['A', 'B', 'C']} />. 子组件可以在数组上执行自定义逻辑或使用该map()方法来呈现数组的元素。

应用程序.js
function Books({arr}) {
  console.log(arr); // 👉️ ['A', 'B', 'C', 'D']
  return (
    <div>
      {arr.map(title => {
        return <div key={title}>{title}</div>;
      })}
    </div>
  );
}

export default function App() {
  const arr = ['A', 'B', 'C', 'D'];

  return (
    <div>
      <Books arr={arr} />
    </div>
  );
}

当将字符串以外的任何 prop 传递给 React 组件时，我们必须将值用大括号括起来。

花括号标记表达式的开始。

我们传递给Books组件的 prop 被称为，因此组件可以解构 prop 并在其上执行逻辑或使用该方法来渲染其元素。 arrArray.map()

您还可以将数组属性传递给内联组件。

应用程序.js
function Books({arr}) {
  console.log(arr); // 👉️ ['A', 'B', 'C', 'D']
  return (
    <div>
      {arr.map(title => {
        return <div key={title}>{title}</div>;
      })}
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Books arr={['A', 'B', 'C', 'D']} />
    </div>
  );
}

上面的代码片段实现了与前一个相同的结果。

如果您遍历数组，请确保为key每个元素设置一个唯一的属性。

这是必要的，因为它有助于 React 跟踪哪些数组元素在重新渲染之间发生了变化，并且 React 能够通过仅更新发生变化的数组元素来使我们的应用程序更快。

您还可以将单个数组元素作为 props 传递给组件。

应用程序.js
function Books({first, second}) {
  console.log(first); // 👉️ 'A'
  console.log(second); // 👉️ 'B'
  return (
    <div>
      {first}
      {second}
    </div>
  );
}

export default function App() {
  const arr = ['A', 'B', 'C', 'D'];
  return (
    <div>
      <Books first={arr[0]} second={arr[1]} />
    </div>
  );
}

通过访问特定索引处的数组元素，我们能够将单个数组元素作为 props 传递给组件。

–