映射组件和字符串的两个数组，并在一个组件中渲染

debugcn 发表于 Dev

罗杰·斯塔克斯

我想映射两个数组：

const social = ["Snapchat", "TikTok", "Dribbble", "Discord", "Facebook"];

const socialIcons = [<SnapchatIcon />, <DribbbleIcon />];

该socialIcons阵列是所有组件

如何将这两个值作为道具发送到DummyRectangle组件中？这是我当前的代码：

  {social.map((s, index) => (
                  <div className="dummy_buttonsWrapper">
                    <DummRectangle social={s} socialIcons={i} />
                  </div>
                ))}

这是DummyRectangle组件：

function DummRectangle({ social, socialIcons }) {
  // console.log("---->", socialIcons);
  return (
    <div>
      <p>{social}</p>
      {<socialIcon/>} // render social icon component
    </div>
  );
}

曼塔斯·阿斯特拉（Mantas Astra）

要做到这一点，你不需要环绕你的标签socialIcon在你的DummRectangle。另外，似乎根本没有传递socialIcon组件。如果我是你，我会做这样的事情：

以下两个示例是您要渲染的组件（在您的情况下- socialIcons）

// Comp1.js
import React from "react";

const Comp1 = () => <div>actual Comp1</div>;

export default Comp1;

// Comp2.js
import React from "react";

const Comp2 = () => <div>actual Comp2</div>;

export default Comp2;

现在，在主要的Parent组件中，您可以通过使用索引访问组件的数组来简单地获取componentName（在您的情况下- social）的当前组件。然后，将其currentComponent作为道具传递到要渲染它的子组件。

// App.js
import React from "react";

import Comp1 from "./Comp1";
import Comp2 from "./Comp2";
import DummyComponent from "./DummyComponent";

export default function App() {
  const componentNames = ["Comp1", "Comp2"];
  const components = [<Comp1 />, <Comp2 />];

  return (
    <div className="App">
      {componentNames.map((name, index) => {
        const currentComponent = components[index];

        return (
          <div>
            <DummyComponent componentName={name} component={currentComponent} />
          </div>
        );
      })}
    </div>
  );
}

在您的Child组件中，只需将其括在方括号中即可进行渲染-无需添加标签。React将为您完成所有渲染。在你的情况下{ socialIcon }

// DummyComponent.js
import React from "react";

const DummyComponent = ({ componentName, component }) => {
  return (
    <div>
      <p>{componentName}</p>
      {component}
    </div>
  );
};

export default DummyComponent;

链接到上面的代码作为参考的Codesandbox：单击此处

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。