React JS-无法检测到“显示”功能答案

【问题标题】：React JS- not able to detect 'show' functionReact JS-无法检测到“显示”功能
【发布时间】：2021-01-04 11:24:24
【问题描述】：

我正在尝试构建一个简单的点击计数器，每次点击计数器都会增加 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();

【问题讨论】：

使用状态不是简单变量
这不是你使用 React 的方式，more here。但是忽略这一点，任何告诉您show 从未使用过的工具都是不正确的。它被使用。（但是点击不会重新渲染任何东西。同样，这不是你使用 React 的方式。）也许该工具没有正确理解 JSX，或者没有配置为处理 JSX。

标签： javascript reactjs function counter

【解决方案1】：

更改您的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

【讨论】：

值没有增加