React中如何渲染div列表？无报错但元素不显示该如何解决

问题原因及解决方案 #

1. 初始版本错误点
   初始代码中renderEvents函数没有返回值，你在if分支内通过map生成的JSX数组没有被返回，函数执行后默认返回undefined，自然没有内容可以被渲染。

2. 修改后仍不渲染的排查方向

• 调用renderEvents的位置没有将返回的JSX数组纳入组件的渲染树：React只会渲染组件return语句中包含的JSX内容，如果你只是单独执行了该函数，没有将返回值放到组件要渲染的节点结构中，内容不会出现在页面上。
• 数据源items为空数组：可在map执行前打印console.log(items.length)确认数据是否存在，空数组执行map会返回空数组，不会抛出错误但也没有内容渲染。
• createStyle返回非法样式：比如样式键使用了横线命名（如font-size而非React要求的驼峰fontSize）、返回非对象类型的值，会导致元素样式异常不可见，可先临时移除style属性测试元素是否正常渲染。

正确使用示例（React函数组件） #

const MyEventComponent = () => {
  // 此处省略items、createStyle的定义逻辑，确保二者已正确赋值
  const renderEvents = (day) => {
    return items.map(doc => (
      <div
        key={doc.id}
        className="item"
        style={createStyle(doc)}
      >
        <h3>{doc.data().title}</h3>
        <p>Start {doc.data().start.toDate().getHours()} End {doc.data().end.toDate().getHours()}</p>
      </div>
    ))
  }

  // 核心：将renderEvents的返回值放到组件返回的JSX结构中
  return (
    <div className="event-list">
      {renderEvents(0)}
    </div>
  )
}

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