javascript - 无法将组件传递给组件

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)


​我试图将“letter.js”作为组件传递给“names.js”并出现很多错误。

当字母与 name.js 位于同一组件中时，代码运行良好。我分离后没有任何效果:\也许这与 的有关，但我想不通...请协助 :)谢谢!

Answer 1

这里可能有 2 种方法可以解决您的问题。

1. 您可以按照其他答案/评论中的建议将字母和姓名导出为默认类别。例如:

   导出默认类 Letter extends Components{...}

2. 或者，如果您不想将它们导出为默认类，则在导入时使用花括号。例如:

   从 './Letter' 导入 {Letter};