Reactjs 如何重构所有子函数以只生成一个子函数？

我是React.js的初学者。尝试优化我的代码（reactjs上的一个简单计算器）。 我有很多子函数来处理一些操作，比如添加新的数字，或者选择操作（+、-）等等。如何重构它们，使只有一个函数在一个地方处理所有操作

来自App.js的代码

export default class App extends Component {
    state = {
        value: [],
        setValue: '',
        operation: ''
}

handleAddNumber = (nbr) => {
    // console.log( 'val: ' + nbr)
    const val = this.state.value
    if (val.length === 10){
        return console.log('Max size!')
    } else if (this.state.value === '0' ) {
        this.setState({
            value: nbr
        })
    } else {
        this.setState({
            value: this.state.value + nbr
        })
    }
    // console.log( 'State: ' + this.state.value)
}

handleOperation = (val) => {
    this.setState({
        setValue: this.state.value,
        value: [],
        operation: val
    })
}

handleEqual = () => {
    let sum;
    let operation = this.state.operation;
    let number1 = parseFloat(this.state.value);
    let number2 = parseFloat(this.state.setValue);

    if (operation === '+') {
        sum = number2 + number1;
    } else if (operation === '-') {
        sum = number2 - number1;
    } else if (operation === '*'){
        sum = number2 * number1;
    } else if (operation === '/') {
        sum = number2 / number1;
    } else if (operation === '%') {
        sum = number1 / 100;
    } else if (typeof sum === "undefined") {
        return
    }

    // const val = sum.toString();

    if (sum.toString().length >= 9) {
        this.setState({
            value: sum.toPrecision(8).toString()
        })
    } else {
        this.setState({
            value: sum.toString()
        })
    }
}

handlePercent = () => {
    let number1 = parseFloat(this.state.value);
    this.setState({
        value: number1 / 100
    })
}

handleSign = () => {
    let number = parseFloat(this.state.value);
    let sum = number * (-1);
    this.setState({
        value: sum
    })
}

addNbrDot = () => {
    const nbr = this.state.value
    const str = nbr.toString();
    const hasDot = str.includes('.', 0);
    if (str.length === 0) {
        this.setState({
            value: 0 + '.'
        })
    } else if (hasDot) {
        console.log('double dots')
    } else {
        this.setState({
            value: this.state.value + '.'
        })
    }
}

handleAC = () => {
    this.setState({
        value: '0'
    })
}

render() {
    return (
    <div className="App">
        <div className="App-box">
            <header className="App-header">
                <h1>Calculator</h1>
            </header>
            <main>
                <Display value = { this.state.value }/>
                <Buttons handleAC = { this.handleAC }
                         handleSign = { this.handleSign }
                         handlePercent = { this.handlePercent }
                         handleEqual = { this.handleEqual }
                         handleOperation = { this.handleOperation }
                         addNumberDot={this.addNbrDot}
                         handleAddNumber = { this.handleAddNumber } />
            </main>
        </div>
    </div>
    );
}

导出默认类应用程序扩展组件{
状态={
值：[]，
设置值：“”，
操作：“”
}
handleAddNumber=（nbr）=>{
//console.log（'val:'+nbr）
const val=this.state.value
如果（val.length==10）{
返回console.log（'Max size！'）
}else if（this.state.value=='0'）{
这是我的国家({
价值：丁腈橡胶
})
}否则{
这是我的国家({
值：this.state.value+nbr
})
}
//console.log（'State:'+this.State.value）
}
手动操作=（val）=>{
这是我的国家({
setValue:this.state.value，
值：[]，
操作：val
})
}
handleEqual=（）=>{
让我们总结一下；
让操作=this.state.operation；
让number1=parseFloat（this.state.value）；
让number2=parseFloat（this.state.setValue）；
如果（操作=='+'）{
总和=数字2+数字1；
}else if（操作=='-'）{
总和=数字2-数字1；
}else if（操作=='*'）{
总和=数字2*数字1；
}else if（操作=='/'））{
总和=数字2/数字1；
}else if（操作=='%'）{
总和=数字1/100；
}else if（类型总和==“未定义”）{
返回
}
//const val=sum.toString（）；
if（sum.toString（）.length>=9）{
这是我的国家({
值：sum.toPrecision（8）.toString（）
})
}否则{
这是我的国家({
值：sum.toString（）
})
}
}
手百分比=（）=>{
让number1=parseFloat（this.state.value）；
这是我的国家({
数值：1/100
})
}
handleSign=（）=>{
让number=parseFloat（this.state.value）；
设和=数*（-1）；
这是我的国家({
价值：总和
})
}
addNbrDot=（）=>{
const nbr=this.state.value
const str=nbr.toString（）；
常量hasDot=str.includes（'.'，0）；
如果（str.length==0）{
这是我的国家({
值：0+'。'
})
}else if（hasDot）{
console.log（'双点'）
}否则{
这是我的国家({
值：this.state.value+'。'
})
}
}
handleAC=（）=>{
这是我的国家({
值：“0”
})
}
render（）{
返回(
计算器
);
}

您可以在github上找到的所有源代码：

---

我愿意接受任何批评和建议。

一个简单的方法是创建一个新函数，将所有其他函数封装在其中。新函数包含一个参数（可能是字符串），该参数定义了您希望执行的操作类型（例如“add”、“equal”等）。然后使用来触发要使用的函数并返回结果

让我用你的代码举例说明一下

handleOperation = (operation, nbr) => {
  switch(operation) {
    case 'add':
      // console.log( 'val: ' + nbr)
      const val = this.state.value
      if (val.length === 10){
          return console.log('Max size!')
      } else if (this.state.value === '0' ) {
          this.setState({
              value: nbr
            })
      } else {
          this.setState({
              value: this.state.value + nbr
          })
      }
      // console.log( 'State: ' + this.state.value)
      return val;
    break;
    case "equal":
      // insert whatever you want here
    break;
    default:
      // whatever you want to do if no operations match
      console.log("handleOperation: Incorrect operation - ", operation);
  }
}

然后，调用函数时，要考虑所需的编号和操作

handleOperation("add",32);

---

谢谢你，杰拉尔德！这是有道理的。这个问题非常广泛和开放，这不是最适合这个网站的。你最好还是问这个。如果你想把它留在这里，我会问一个更封闭的问题，可以有一个正确的答案。