React如何在单组件内动态渲染n个带不同内容的div/HTML标签？

完全可以实现，不需要抽离独立的外部子组件，所有逻辑都能在当前组件内完成。核心思路是把差异化内容抽成结构化配置，通过遍历复用同一份JSX结构渲染即可。

具体实现方法 #

• 先梳理重复块的差异字段：你给出的示例里，不同块只有3处内容有区别：容器div的id属性、标题里的动物名、描述文本里的动物名，把这些差异内容整理成数组配置即可。
• 遍历配置数组，复用统一的div结构渲染每一项，注意给列表最外层元素加唯一的key属性，符合React列表渲染要求。
• 如果觉得直接在map里写JSX可读性差，也可以在当前组件内部定义一个渲染函数，接收配置参数返回对应JSX结构即可，这个函数属于当前组件的内部逻辑，不算独立子组件，完全满足你的要求。
• 如果后续需要给单个动物块加独立状态、独立交互逻辑，直接在遍历过程中定义对应逻辑即可，不会出现冲突。

改造后可直接运行的代码 #

import React, {useRef} from "react";

function test(props) {
    const animalAmount = useRef(20);
    // 差异化配置数组
    const animalConfigList = [
        { id: 'turtle-id', animalName: 'turtles' },
        { id: 'dog-id', animalName: 'dogs' },
        { id: 'fish-id', animalName: 'fish' },
        { id: 'hippo-id', animalName: 'hippos' }
    ];

    // 可选：组件内部定义渲染函数，不需要抽离为独立子组件
    const renderAnimalBlock = (config) => {
        return (
            <div id={config.id} key={config.id}>
                <h1>I like {config.animalName}!</h1>
                <p>there are {animalAmount.current} {config.animalName} in my house!</p>
                <button>Click me!</button>
            </div>
        )
    }

    return (
        <div>
            {/* 遍历配置，复用结构渲染 */}
            {animalConfigList.map(config => renderAnimalBlock(config))}
            
            {/* 不想写内部渲染函数的话，也可以直接在map里写JSX，效果完全一致
            {animalConfigList.map(config => (
                <div id={config.id} key={config.id}>
                    <h1>I like {config.animalName}!</h1>
                    <p>there are {animalAmount.current} {config.animalName} in my house!</p>
                    <button>Click me!</button>
                </div>
            ))}
            */}
        </div>
    );
}

export default test;

注：原示例代码中animalAmount = useRef(20)漏了变量声明关键字const，属于语法错误，上述代码已经修正。

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