Question

我在reactjs中遇到一个非常不寻常的错误，它说instance.render不是reactjs中的函数。我无法跟踪错误。这是index.js文件和组件中唯一的其他文件。

students_titlecase.append(student["name"].title())

以下是组件文件夹中搜索栏中的search_bar.js。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import SearchBar from './components/search_bar.js';
const API_KEY='AIzaSyA4c4bzl1At2c0IAJXU939D1vAIUwAn3Ss';
const App = ()=>{
  return(
     <div>
      <SearchBar/>
     </div>
  );
}



ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

我发现了同样的问题。解决此问题的一种方法是使用常规的JavaScript原型方法。我已经在没有es6的情况下使用react来查找故障。

var MyApp = function(){
    React.Component.call(this);
    //below it create intances:
    /*this.render =  function (){
        return React.createElement('div', null, "it is working");
   };*/
   
};

MyApp.prototype = Object.create(React.Component.prototype);
MyApp.prototype.constructor = MyApp;
//below i create a prototype method on the class

MyApp.prototype.render = function(){
    return React.createElement('div', null, "hoo");
};

ReactDOM.render(React.createElement(MyApp), document.getElementById('root'));

<body>
<div id="root"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</body>

Answer 2

App元素出现问题。要么调用函数，要么像React Cmopnent一样尝试构造它，并且应该修复它。代码笔为我工作

class App extends React.Component
{
  render()
  {
      return(
       <div>
        <SearchBar/>
       </div>
    );
  }
}

它试图在你的App上调用渲染，因为你将其构造成一个React JSX组件。但实际上它是一种功能。您也可以调用App而不是像JSX一样设置它

ReactDOM.render(App(), document.getElementById('root'));

但我坚持使用第一种方法。更容易理解正在发生的事情

instance.render不是reactjs中的函数错误

2 个答案: