Question

我有这段代码：

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

names.js：

import React from "react";
import ReactDOM from "react-dom";
import Letter from './letter';



export let destination = document.querySelector ("#container");

export class Names extends React.Component {
  render() {
    let name = this.props.value;
    let returnValue = [];

    for(let i=0; i<name.length; i++){
      returnValue.push(<Letter key={`names-${i}`} value={name[i]}></Letter>);
    }
    return (
      <div>
        {returnValue}
      </div>
    );
  };
}

letter.js：

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

console.log('asdf');
export class Letter extends React.Component {
  getRandomColor() {
    let letterNums = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i<6; i++) {
      color += letterNums[Math.floor(Math.random()*16)];
    }
    return color;
  };

  render() {
    let name = this.props.value;

    return (<div className="letter"
                          style={{backgroundColor: this.getRandomColor()}}
                          key={`Letter-$`}>
                          {this.props.value}
                        </div>);

  };
}

这是错误：

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)

我想通过＆＃34; letter.js＆＃34;作为＆＃34; names.js＆＃34;的一个组成部分。并且收到很多错误。

当字母与names.js在同一个组件中时，代码运行良好。我分开后没有任何作品：也许它与我有关无法想象...... 请协助：）谢谢！

Answer 1

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

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

export default class Letter extends React.Component {

Answer 2

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

要么导出Letter＆amp;根据其他答案/评论中的建议将其命名为默认类。例如：

<强> export default class Letter extends Components{...}
或者如果您不想将它们导出为默认类，则在导入时使用花括号。例如：

<强> import {Letter} from './Letter';

无法将组件传递给组件

2 个答案: