React无状态列表组件复用问题：函数组件调用后无渲染输出

嘿，我一眼就瞅出你这个函数组件没渲染内容的问题啦！主要有两个小坑你踩了：

1. 箭头函数未正确返回JSX元素 #

你在props.items.map()里用了大括号{}包裹JSX，但没有写return语句——箭头函数如果用大括号，必须显式返回值才行。要么加return，要么去掉大括号让它隐式返回。

2. 缺少根容器元素 #

React要求组件只能返回单个根元素，你直接返回一堆<li>是不符合规则的，得用容器（比如原来类组件里的<ul>和外层<div>）把它们包起来。

修正后的函数组件代码 #

function Menu(props) {
  // 还原原来类组件里的样式引用
  const { listStyle } = styles;
  return (
    <div>
      <ul style={listStyle}>
        {/* 用小括号包裹JSX实现隐式返回，或者写成 {return <li.../>} */}
        {props.items.map((i, index) => (
          <li key={index} style={{ marginLeft: 10 }}>
            {i}
          </li>
        ))}
      </ul>
    </div>
  );
}

如果不想保留外层多余的<div>，可以用React的Fragment来做无额外DOM的容器：

// 记得先引入Fragment
import { Fragment } from 'react';

function Menu(props) {
  const { listStyle } = styles;
  return (
    <Fragment>
      <ul style={listStyle}>
        {props.items.map((i, index) => (
          <li key={index} style={{ marginLeft: 10 }}>
            {i}
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

额外小建议 #

用index作为key虽然能临时解决问题，但如果你的列表项后续会有新增、删除或排序操作，最好用每个item的唯一标识（比如id）作为key，这样React能更高效地更新DOM哦～

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