如何解决React JS-无法检测“显示”功能
我正在尝试构建一个简单的点击计数器,每次点击计数器将增加 1(最初为 0)。但我得到的错误是 'show' 已定义但从未使用。函数 'show' 在每次点击后重新渲染 DOM,如 index.js 文件中给出的那样。
App.js 文件-
import './App.css';
import React,{ Component } from 'react';
class App extends Component {
render() {
return (
<div onClick={this.props.onClick}>This div has been clicked {this.props.clicks} times.</div>
);
}
}
export default App;
index.js 文件-
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
let model = { clicks: 0 };
function show() {
ReactDOM.render(<App clicks={model.clicks} onClick={()=> { model.clicks += 1; show();}} />,document.getElementById('root'));
}
reportWebVitals();
解决方法
更改您的index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
class Index extends React.Component {
state = {
clicks: 0
};
render() {
return (
<App
clicks={this.state.clicks}
onClick={() => this.setState((props) => ({ clicks: props.clicks + 1 }))}
/>
);
}
}
ReactDOM.render(<Index />,document.getElementById("root"));
代码沙盒:https://codesandbox.io/s/dark-firefly-i30t5?file=/src/index.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。