Question

遍历文档时，我尝试使用大约3种不同的方式来渲染这个searchCard元素组件，但我一直在定义它，但从未使用过，但是在最后一次尝试React.DOM.render时遇到了编译错误。

这是一个在codeandbox中构建的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>
);

这是index.js文件

`
import React from "react";
import ReactDOM from "react-dom";
import searchCard from "./components/Toolbar/searchCard/searchCard";

function App() {
  return (
    <div className="App">
      <Toolbar>
        <TopLinks />
        <SplashScreen />
        <Hpbg />
      </Toolbar>
      <searchCard />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

`

TypeError 无法读取未定义的属性“ render” 评估 /src/components/Toolbar/searchCard/searchCard.js:4:10

`
  1 | import React from "react";
  2 | import "bootstrap/dist/css/bootstrap.css";
  3 | import react from "react-dom";
> 4 | React.DOM.render(
    |          ^
  5 |   <div class="card">
  6 |     <h5 class="card-header">Featured</h5>
  7 |     <div class="card-body">
`

评估 /src/index.js:8

`
   5 | import "./styles.css";
   6 | import Hpbg from "./components/Toolbar/Hpbg/Hpbg";
   7 | import SplashScreen from "./components/Toolbar/SplashScreen/SplashScreen";
>  8 | import searchCard from "./components/Toolbar/searchCard/searchCard";
   9 | 
  10 | function App() {
  11 |   return (
`

Answer 1

您可以这样编写组件

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;

在index.js文件import中，您的组件就是这样，

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

最后是用法

<SearchCard />

我的元素无法渲染的原因是什么？

1 个答案: