请不要将 id 与 react js 一起使用，请检查下面的代码。此外，使用钩子是创建 react 组件的更好、更快捷的方法。

import React, { useState } from "react"
import ReactDOM from "react-dom"
import "./style.css"


const JavascriptCalculator = () => {
const [symbol, setSymbol] = useState(0)

const display = (value) => {
   setSymbol(value)
}

const clear = () => {
    setSymbol(0)
}
// dont use id with react, if must try using ref(check reactjs.org for more)
return (
<div id="javascript-calculator">
  <h1 id="title">Javascript Calculator</h1>
  {/*no need for accessing this element id*/}
  <div id="display"><p>{symbol}</p></div>
  <hr/>
  <div>
    <button id="clear" onClick={() => clear()}> clear
    </button>
    {/*pass the value as argument for display function*/}
    <button id="equals" onClick={e => display("=")}> =</button>
    <button id="zero" onClick={e => display("0")}> 0</button>
    <button id="one" onClick={e => display("1")}> 1</button>
    <button id="two" onClick={e => display("2")}> 2</button>
    <button id="three" onClick={e => display("3")}> 3</button>
    <button id="four" onClick={e => display("4")}> 4</button>
    <button id="five" onClick={e => display("5")}> 5</button>
    <button id="six" onClick={e => display("6")}> 6</button>
    <button id="seven" onClick={e => display("7")}> 7</button>
    <button id="eight" onClick={e => display("8")}> 8</button>
    <button id="nine" onClick={e => display("9")}> 9</button>
    <button id="add" onClick={e => display("+")}> +</button>
    <button id="subtract" onClick={e => display("-")}> -</button>
    <button id="multiply" onClick={e => display("*")}> *</button>
    <button id="divide" onClick={e => display("/")}> /</button>
    <button id="decimal" onClick={e => display(".")}> .</button>
  </div>
</div>
)
}

ReactDOM.render(<JavascriptCalculator/>, document.getElementById("app"))

如果您有疑问，请告诉我

解决方案：

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';


class JavascriptCalculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      symbol: 0
    }
    this.display = this.display.bind(this);
  }

  display(id){
    this.setState({ symbol: id })
  }

  render() {
    return (
      <div id="javascript-calculator">
      <h1 id="title">Javascript Calculator</h1>
      <div id="display">{this.state.symbol}</div>
      <hr/>
      <div>
      <button id="clear" onClick={e => this.display("0")}> clear</button>
      <button id="equals" onClick={e => this.display("=")}> = </button>
      <button id="zero" onClick={e => this.display("0")}> 0 </button>
      <button id="one" onClick={e => this.display("1")}> 1 </button>
      <button id="two" onClick={e => this.display("2")}> 2 </button>
      <button id="three" onClick={e => this.display("3")}> 3 </button>
      <button id="four" onClick={e => this.display("4")}> 4 </button>
      <button id="five" onClick={e => this.display("5")}> 5 </button>
      <button id="six" onClick={e => this.display("6")}> 6 </button>
      <button id="seven" onClick={e => this.display("7")}> 7 </button>
      <button id="eight" onClick={e => this.display("8")}> 8 </button>
      <button id="nine" onClick={e => this.display("9")}> 9 </button>
      <button id="add" onClick={e => this.display("+")}> + </button>
      <button id="subtract" onClick={e => this.display("-")}> - </button>
      <button id="multiply" onClick={e => this.display("*")}> * </button>
      <button id="divide" onClick={e => this.display("/")}> / </button>
      <button id="decimal" onClick={e => this.display(".")}> . </button>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<JavascriptCalculator />, document.getElementById("app"));

好的...我重写了您的组件，以 React 方式执行操作并使用钩子。 JSX 的好处之一是能够迭代数据并显示它而无需重复。

创建一个名为

symbols.js

export const values = [
    {
        id: 'clear',
        symbol: 'clear'
    },
    {
        id: 'equals',
        symbol: '='
    },
    {
        id: 'zero',
        symbol: '0'
    },
    {
        id: 'one',
        symbol: '1'
    },
    {
        id: 'two',
        symbol: '2'
    },
    {
        id: 'three',
        symbol: '3'
    },
    {
        id: 'four',
        symbol: '4'
    },
    {
        id: 'five',
        symbol: '5'
    },
    {
        id: 'six',
        symbol: '6'
    },
    {
        id: 'seven',
        symbol: '7'
    },
    {
        id: 'eight',
        symbol: '8'
    },
    {
        id: 'nine',
        symbol: '9'
    },
    {
        id: 'subtract',
        symbol: '-'
    },
    {
        id: 'multiply',
        symbol: '*'
    },
    {
        id: 'divide',
        symbol: '/'
    },
    {
        id: 'decimal',
        symbol: '.'
    },
]

在您的组件中导入您的值，您可以像这样迭代它们：

import React, { useState } from "react";
import { values } from "./values.js";

const JavascriptCalculator = () => {
  const [symbol, setSymbol] = useState(0);

  const display = (symbol) => {
    setSymbol(symbol);
  };

  const clear = (id) => {
    setSymbol(0);
  };

  return (
    <div id="javascript-calculator">
      <h1 id="title">Javascript Calculator</h1>
      <div id="display">
        <p>{symbol}</p>
      </div>
      <hr />
      <div>
        {values.map(({ id, symbol }) => (
          <button key={id} onClick={() => id === 'clear' ? clear() : display(symbol)}>
            {symbol}
          </button>
        ))}
      </div>
    </div>
  );
};

export default JavascriptCalculator;

工作示例 https://codesandbox.io/s/magical-brook-enk7e