Question

嗨，我必须将数组作为道具传递给功能组件。

import React from "react";
import { render } from "react-dom";

const App = () => {
  const FBS = ({ figures }) => {
    console.log(typeof figures);
    return figures.map((item, key) => <p key={key}>{item.description}</p>);
  };
  const figures = [
    {
      config: 112,
      description: "description text 1"
    },
    {
      config: 787,
      description: "description text 2"
    }
  ];

  return (
    <div>
      {/* <FBS {...figures} /> */}
      <FBS figures={figures} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id='root' />
</body>

但是它将转换为子组件中的对象。请查看渲染功能。当我将数组作为{... figures}传递时，由于无法在其上运行map函数，因此无法在FBS组件中将其作为数组获取。而当我将其作为数字传递时，我得到一个数组。我想将其作为{...数字}传递。

请帮助

请查看我的代码以更好地理解。 here

Answer 1

您需要具有一个附加的对象，该对象具有一对键和值，这些键和值将对您的props分解为React组件。

const props = {
  figures, // shorter way of writing figures: figures
  // Any other objects you'd like to pass on as props
}

然后，您可以执行以下操作：

<FPS {...props} />

Updated Code

基本上，您只能在React组件中解构对象，因为被解构的对象的键值对将成为组件的props。

为了更好地理解，

const arr = [{ a: 'a'}]
{...arr}

将给出：

{
  0: {a: 'a'}
}

因为0是键，因为它是一个数组，而不是一个对象，所以您真正要做的是传递名称为0的prop而不是figures和{{ 1}}是figures，因此是错误。

Answer 2

您可以使用以下内容：

import React from "react";
import Figure from './Figure';
import { render } from "react-dom";

const App = () => {
  const figures = [
    {
      config: 112,
      description: "description text 1"
    },
    {
      config: 787,
      description: "description text 2"
    }
  ];

  return (
    <div>

      { 
        figures.map((figure, key) => {
          return <Figure key={key} {...figure}/>
        })
      }

    </div>
  );
};

render(<App />, document.getElementById("root"));

并创建一个名为Figure的组件，如下所示：

import React from "react";

const Figure = (props) => {
   return (
    <div>
     <p>{props.description}</p>
     <p>{props.config}</p>
    </div>
  );
};

export default Figure;

当我在react函数组件中传递数组时，它变成一个对象

2 个答案: