Question

我正在尝试制作简单的点击计数器，但这不起作用

let i = 0;
let counter = <button>{i}</button>;

counter.onclick = () => {
  i++;
  ReactDOM.render(
  counter,
  document.getElementById('root')
  );
};

当我运行它时，它给出了这个错误信息

Error in /~/index.js (12:1)
can't define property "onclick": Object is not extensible

任何帮助将不胜感激我刚刚开始使用 reactjs 谢谢

Answer 1

这里有几个问题：

onclick 是 DOM 元素的属性，而不是 JSX 元素。您可以使用 camelCase props 将事件处理程序分配给 JSX 元素。
您使用 ReactDOM.render() 进行应用的初始呈现；为了不触发更新，您可以通过更改状态来触发更新。
您需要将要更改的数据存储在您的状态中，而不是存储在松散变量中。

例如：

const App = () => {
   const [i, setI] = React.useState(0);
   const increment = () => setI(i + 1);

   return <button onClick={increment}>{i}</button>
};

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

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

您错过了太多 React 基础知识，您可能应该go back to an introductory tutorial。

为什么显示“onclick”不可扩展

1 个答案: