React组件间组件传递失败问题求助（附相关代码）

嘿，我看你在尝试从JSON数据批量渲染Names组件时遇到了问题，结合你给出的代码片段，我帮你梳理下可能的问题点和修复方案：

先把你的代码补全并整理清楚 #

index.js #

import React from "react";
import ReactDOM from "react-dom";
import {destination, Names} from './components/names';
import json from './names.json';

function initFromJson() {
  let names = [];
  for(let i=0; i<json.length; i++){
    names.push(<Names key={`initNames-${i}`} value={json[i].name}></Names>);
  }
  return names;
}

ReactDOM.render(
  <div id="logo-text-box">
    {initFromJson()}
  </div>,
  destination
);

components/names.js（补全你没写完的部分） #

import React from "react";

// 假设你在这里定义了挂载目标元素
export const destination = document.getElementById('root');

// 这里应该是你的Names组件定义
export function Names(props) {
  // 很多人会在这里漏掉返回JSX，这是常见坑！
  return <div>{props.value}</div>;
}

导致组件无法正常渲染的常见原因&修复 #

• Names组件没有返回可渲染的JSX
  这是最常见的问题！如果你的组件只是空定义，没有return任何JSX元素，页面上自然看不到内容。一定要确保组件返回有效的React元素，比如上面的return <div>{props.value}</div>。

• destination挂载元素不存在
  要确保当你导入destination时，页面上已经存在对应的DOM元素（比如id为root的div）。如果HTML里没这个元素，React找不到挂载点，组件肯定渲染不出来。

• 组件导出/导入的拼写错误
  检查下names.js里的Names组件和destination是不是用export正确导出的，index.js里的导入有没有写错大小写或者名称，拼写错误经常导致组件无法被正确识别。

优化后的更优雅写法 #

其实可以用map替代for循环，更符合React的写法习惯，同时如果是React 18+版本，推荐用createRoot来渲染：

index.js（React 18+版本） #

import React from "react";
import ReactDOM from "react-dom/client";
import { Names } from './components/names';
import json from './names.json';

// 用map简化数组遍历
const initFromJson = () => {
  return json.map((item, idx) => (
    <Names key={`name-${idx}`} value={item.name} />
  ));
};

// 获取挂载根元素
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <div id="logo-text-box">
    {initFromJson()}
  </div>
);

components/names.js #

import React from "react";

// 只导出组件，挂载元素直接在index里获取更清晰
export function Names({ value }) {
  return <span className="name-item">{value}</span>;
}

另外，别忘了确保你的names.json是有效的数组格式，比如：

[
  {"name": "张三"},
  {"name": "李四"},
  {"name": "王五"}
]

这样调整后，你的组件应该就能正常渲染啦！

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