为什么我会收到一个RefrenceError，表明我的函数未定义？

Answer 1

您面临的问题是由于

app

函数不在全局范围内。在 HTML 中使用

onclick="app()"

时，浏览器会在全局范围内查找

app

函数，但它在

App.js

模块中定义为导出。

要解决此问题，您需要使

app

在全局范围内可访问。实现此目的的一种方法是将其附加到

window

对象。

按如下方式修改您的

App.js

：

import React from "react";
import ReactDOM from 'react-dom/client';
import CheckTask from "./Check.js";

// Attach app to the window object
window.app = () => {
  const toDoList = document.getElementById('toDoContainer');
  const root = ReactDOM.createRoot(toDoList);
  root.render(<CheckTask />);
}

现在，当您使用

onclick="app()"

时，浏览器将能够在全局范围内找到

app

函数。

此外，在您的

Check.js

文件中，您尝试直接访问

addTask

元素。建议将输入值作为参数传递给

CheckTask

函数。像这样修改您的

Check.js

文件：

import React from "react";
import ReactDOM from 'react-dom/client';

const CheckTask = (input) => {
  if (input === '' || input === ' ') {
    return alert('You have to write something');
  } else {
    const toDoList = document.getElementById('toDoContainer');
    const root = ReactDOM.createRoot(toDoList);
    return root.render(<h1>Hello World</h1>);
  }
}

export default CheckTask;

在你的

App.js

中：

import React from "react";
import ReactDOM from 'react-dom/client';
import CheckTask from "./Check.js";

window.app = () => {
  const input = document.getElementById('addTask').value;
  CheckTask(input);
}

这样，您就可以将输入值作为参数直接传递给

CheckTask

。