时间戳

首页 > 解决方案 > 无限的孩子

reactjs - 无限的孩子

问题描述

嗨，我有一个父组件，它有一个子组件。我仅限于在父母内部打电话给一个孩子，就像这样：

<Parent child={<Child />} />

我想在父组件中渲染许多子组件，而不仅仅是一个。像这样的东西：

<Parent><Child /><Child /><Child /></Parent>

我怎样才能做到这一点？

这是我当前的代码：

interface ParentProps {
  child: ReactNode;
}
const Parent = ({ child }: ParentProps) => (
  <div>
       {child}
  </div>

标签： reactjstypescript

解决方案

你不能创建无限的孩子​​，这没有任何意义，javascript 也不允许循环无限运行。但你可以做这样的事情

应用程序.js

import Child from "./Child";
import "./App.css";

function App() {
  const childArray = () => {
    const container = [];
    for (let index = 0; index < 10; index++) {//you can put 1000 or hundred thousand whatever you want 
      container.push(<Child key={index} />);
    }
    return container;
  };

  return <div className="App">{childArray()}</div>;
}

export default App;

Child.js

import React from "react";

function Child() {
  return <div>This is Child component</div>;
}

export default Child;

推荐阅读