Javascript 我的元素获胜的原因是什么；不渲染？

通过阅读文档，我试图呈现这个searchCard元素组件，介绍了三种不同的获取方式，定义了“searchCard”，但从未使用过，或者在最后一次尝试React.DOM.render时，我遇到了编译错误

这是在codesandbox中构建的react应用程序

我尝试过其他渲染方法和函数。比如

 class searchCard extends Component {

 } 

 OR

 const searchCard = () => (); 

 OR

 const searchCard = props => ();

这是searchCard.js文件

import React from "react";

import "bootstrap/dist/css/bootstrap.css";
import react from "react-dom";
React.DOM.render(
  <div class="card">
    <h5 class="card-header">Featured</h5>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">
        With supporting text below as a natural lead-in to additional content.
      </p>
      <a href="/" class="btn btn-primary">
        Go somewhere
      </a>
    </div>
  </div>
);

---

您可以这样编写组件

import React from 'react';
class SearchCard extends Component {  // Use PascalCase for class name
   render(){
       return(
         <div class="card">
           <h5 class="card-header">Featured</h5>
           <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">
             With supporting text below as a natural lead-in to additional content.
            </p>
            <a href="/" class="btn btn-primary">
              Go somewhere
            </a>
           </div>
       </div> 
       )
   }
}
export default SearchCard;

import SearchCard from "./components/Toolbar/searchCard/searchCard"; //Try to use PascalCase for component import. Also make sure you are importing from correct path. 

最后是用法

<SearchCard />

trued and got\u react.default.render不是一个函数，

searchCard.js

导出任何东西吗？您最初2-3次尝试定义

searchCard

都是正确的，您只需要在文件底部添加一个

导出默认的searchCard

。定义

SearchCard

类似于您定义

App

的方式，并将其导出为默认值。另外，组件名的开头使用大写字母也是一种常见的做法。这是正确的答案，我正准备这样回答，因为我确实使用了较短的语法来定义组件！const SearchCard=（）=>（）；导出默认搜索卡；谢谢你的帮助

import React from 'react';
class SearchCard extends Component {  // Use PascalCase for class name
   render(){
       return(
         <div class="card">
           <h5 class="card-header">Featured</h5>
           <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">
             With supporting text below as a natural lead-in to additional content.
            </p>
            <a href="/" class="btn btn-primary">
              Go somewhere
            </a>
           </div>
       </div> 
       )
   }
}
export default SearchCard;

import SearchCard from "./components/Toolbar/searchCard/searchCard"; //Try to use PascalCase for component import. Also make sure you are importing from correct path. 

<SearchCard />