错误：元素类型无效：在类中呈现类

Question

我正在处理默认的 React Page Source.js 并尝试使用默认 App 呈现另一个组件

这是错误

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是我的代码。

import logo from './logo.svg';
import './App.css';
import React from 'react';
import Card from 'react-bootstrap/Card';


class SimpleCard extends React.Component{
   render (props) {
      return(
          <Card>
             <Card.CardTitle>
                {this.props.name}
             </Card.CardTitle>
          </Card>
      );
   }
}

class App extends React.Component{
   renderSimpleCard(newName) {
      return <SimpleCard name="newName"/>;
   }

render(){
   return(
      <div className="App">
         <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
      <p>
         Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
      <div>{this.renderSimpleCard("test")}</div>
   </header>
   </div>
  );
 }
}

export default App;

我的导入代码有什么问题还是我需要更改其他内容。就像在我的 package.json 中一样

Answer 1

Card.CardTitle 组件在 react-bootstrap 中不存在。它应该是Card.Title。

<Card>
  <Card.Title>{this.props.name}</Card.Title>
</Card>

并且renderSimpleCard 方法应该将newName 变量传递给name 属性中的SimpleCard 组件（您的代码正在传递字符串'newName'）。

renderSimpleCard(newName) {
  return <SimpleCard name={newName} />;
}

另外，请注意render 方法不接收任何参数。

render (props) {
  // ...
}

应该是

render() {
  // ...
}