React.js中如何根据state内的数值生成对应数量的div标签

实现方案 #

你需要新增一个state来存储提交后确认要渲染的div数量，再通过数组映射的方式在form.b内批量渲染元素，修改后的完整代码如下：

import { useState } from 'react'

function YourComponent() {
  // 存储输入框的临时数值
  const [number, setNumber] = useState('')
  // 存储提交后需要渲染的div数量
  const [renderCount, setRenderCount] = useState(0)

  const appendChilddiv = (e) => {
    e.preventDefault()
    // 把输入的字符串转为数字，非法输入默认渲染0个
    const count = Number(number) || 0
    setRenderCount(count)
    // 清空输入框
    setNumber('')
  }

  return (
    <div>
      <form className="a" onSubmit={appendChilddiv}>
        <input
          value={number}
          onChange={(e) => setNumber(e.target.value)}
          type="number"
          min="0" // 限制输入最小值为0，避免负数导致渲染异常
        />
        <button type="submit">submit</button>
      </form>

      <div>
        <form className="b">
          {/* 生成对应长度的数组，映射为div元素 */}
          {Array.from({ length: renderCount }, (_, index) => (
            // 循环渲染元素必须加唯一key
            <div key={index}>第{index + 1}个div</div>
          ))}
        </form>
      </div>
    </div>
  )
}

核心逻辑说明 #

• 新增的renderCount状态用来持久化存储提交后的渲染数量，不会因为输入框清空而丢失
• Array.from({length: 数值})可以快速生成指定长度的数组，适配React的列表映射渲染规则
• 输入框新增min="0"限制，避免用户输入负数出现逻辑异常

内容的提问来源于stack exchange，提问作者geo