Javascript can'；t将组件传递到组件

我有以下代码：

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
);

从“React”导入React；
从“react dom”导入react dom；
从“./components/Names”导入{destination，Names}；
从“./names.json”导入json；
函数initFromJson（）{
让名称=[]；
对于（让i=0；i我想您在执行导出时忘记了
default
关键字：

import React from "react";
import ReactDOM from "react-dom";

export default class Letter extends React.Component {

我想您在导出时忘记了
default
关键字：

import React from "react";
import ReactDOM from "react-dom";

export default class Letter extends React.Component {

这里有两种方法可以解决您的问题

您可以按照其他答案/注释中的建议，将字母和名称导出为默认类。例如：

导出默认类字母扩展组件{…}

或者，如果不想将它们作为默认类导出，则在导入时使用大括号。例如：

从“/Letter”导入{Letter}；

这里有两种方法可以解决您的问题

您可以按照其他答案/注释中的建议，将字母和名称导出为默认类。例如：

导出默认类字母扩展组件{…}

或者，如果不想将它们作为默认类导出，则在导入时使用大括号。例如：

从“/Letter”导入{Letter}；

export default class Letter，export default class name，您忘记导出这两个组件
import{Letter}从“./letter”；
名称组件发生错误，您不需要默认导出，导入方式正确。检查路径导出默认类名，导出默认类名，您忘记导出这两个组件
导入{letter}从“./letter”；
名称组件发生错误，您不需要默认导出，导入方式正确。请检查路径
warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Names`.
    in Names
    in div
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Names`.
    at invariant (invariant.js:42)
    at createFiberFromElement (react-dom.development.js:5753)
    at createChild (react-dom.development.js:6976)
    at reconcileChildrenArray (react-dom.development.js:7282)
    at reconcileChildFibers (react-dom.development.js:7651)
    at reconcileChildrenAtExpirationTime (react-dom.development.js:7756)
    at reconcileChildren (react-dom.development.js:7747)
    at updateHostComponent (react-dom.development.js:7998)
    at beginWork (react-dom.development.js:8229)
    at performUnitOfWork (react-dom.development.js:10224)
react-dom.development.js:9747 The above error occurred in the <div> component:
    in div (created by Names)
    in Names
    in div

Consider adding an error boundary to your tree to customize error handling behavior.
Visit ** to learn more about error boundaries.
react-dom.development.js:588 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See ** for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:588)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at requestWork (react-dom.development.js:10878)
    at scheduleWorkImpl (react-dom.development.js:10732)
    at scheduleWork (react-dom.development.js:10689)
    at scheduleTopLevelUpdate (react-dom.development.js:11193)
    at Object.updateContainer (react-dom.development.js:11231)


import React from "react";
import ReactDOM from "react-dom";

export default class Letter extends React.Component {