React中map遍历渲染组件页面无内容显示问题排查

AI 小北

2026-8-29

问题诱因

React的JSX语法有明确的组件解析规则：所有自定义组件必须以大写英文字母开头，小写开头的标签会被直接判定为原生HTML DOM标签。
你的代码中将按键组件定义为小写开头的box，在render方法里写<box text={key} />时，React不会调用你写的那个函数组件，只会尝试渲染一个浏览器根本不认识的原生<box>标签，最终自然不会有任何内容显示在页面上。

修复方案

将自定义的按键组件名从小写box改为大写开头的Box，符合React组件命名规范
将map遍历中渲染的组件标签同步替换为大写开头的<Box />

修复后的完整可运行代码如下：

class App extends React.Component {
  state = {
    keys: ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"]
  };
  render() {
    const { keys } = this.state;
    return (
      <div className="inner-container" id="drum-machine">
        <div id="display">
          {keys.map((key, idx) => (
            <Box text={key} key={idx} />
          ))}
        </div>
      </div>
    );
  }
}
const Box = (props) => <div className="box">{props.text}</div>;

ReactDOM.render(<App />, document.getElementById("app"));