父组件定义一个id 子组件获取父组件id自增，循环子组件

你可以通过 props 将父组件的 id 传递给子组件，并在子组件中定义一个 state，用于保存当前的 id 值。每当子组件被渲染时，都将 state 中的 id 值自增，并将其传递给下一个子组件。

下面是一个示例代码：

// 父组件
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [id, setId] = useState(0);

  return (
    <div>
      {
        // 循环子组件
        Array.from({ length: 5 }).map((_, index) => (
          <ChildComponent key={index} id={id} setId={setId} />
        ))
      }
    </div>
  );
}

// 子组件
import React, { useState } from "react";

function ChildComponent(props) {
  const [id, setId] = useState(props.id);

  // 自增id
  setId(id + 1);

  return (
    <div>
      <p>我是第 {id} 个子组件</p>
    </div>
  );
}

export default ChildComponent;

在上面的代码中，父组件定义了一个初始值为 0 的 id 状态，并通过 props 将其传递给子组件。子组件接收到 id 后，定义了一个 state，用于保存当前的 id 值。每当子组件被渲染时，都将 state 中的 id 值自增，并将其渲染出来。这样，就可以循环渲染多个子组件，并且每个子组件的 id 值都会自动递增。