Javascript 如何使用通用方法通过重用代码定义React组件

我目前有两个React组件，在功能上看起来很相似。它们都有类似的方法，用于从服务器获取数据，并通过向不同端点生成API来更新每个组件的状态

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import AppService from '../lib/service';

class Factorial extends Component {

    constructor(props) {
        super(props);

        this.state = {
            value: '',
        }
    }

    getNext() {
        AppService.getNextFactorial().then(data => {
            this.setState({ value: data.data.gen })
        })
    }

    resetFactorial() {
        AppService.resetNextFactorial().then(data => {
            this.setState({ value: data.data.reset })
        })
    }

    render() {
        return (
            <div className={'functionsWrapper'}>
                <h2> Factorial Sequence Generator </h2>
                <p> Click to get the next value in the sequence </p>
                <button onClick={() => this.getNext()}> Get Next</button>
                <button onClick={() => this.resetFactorial()}> Reset </button>

                <div>
                    <input type="text" id="body" defaultValue={this.state.value} name="body" className="form-input" />
                </div>
            </div>
        )
    }
}

export default withRouter(Factorial);

import React，{Component}来自'React'；
从“react router dom”导入{withRouter}；
从“../lib/service”导入AppService；
类阶乘扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
}
}
getNext（）{
AppService.getNextFactory（）。然后（数据=>{
this.setState（{value:data.data.gen}）
})
}
重设阶乘（）{
AppService.ResetNextFactory（）。然后（数据=>{
this.setState（{value:data.data.reset}）
})
}
render（）{
返回(
阶乘序列发生器
单击以获取序列中的下一个值

this.getNext（）}>Get Next
this.resetFactorial（）}>Reset
)
}
}
使用路由器导出默认值（阶乘）；

import React，{Component}来自'React'；
从“../lib/service”导入AppService；
类Fibonacci扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
}
}
getNext（）{
AppService.getNextFibonacci（）。然后（数据=>{
this.setState（{value:data.data.gen}）
})
}
重置斐波那契（）{
AppService.resetNextFibonacci（）。然后（数据=>{
this.setState（{value:data.data.reset}）
})
}
render（）{
返回(
斐波那契序列发生器
单击以获取序列中的下一个值

this.getNext（）}>Get Next
此参数为.resetFibonacci（）}>Reset
)
}
}
导出默认斐波那契；

---

我想要实现的是能够分割每个组件的功能并使其可重用，这样我就可以有一个通用的方法

helper.js

import AppService from '../lib/service';

export function resetFibonacci() {
    AppService.resetNextFibonacci().then(data => {
        this.setState({ value: data.data.reset })
    });    
}

注意：使用函数代替箭头函数“（）=>{}”

Fibonacci.js（您的组件）

注意：将此绑定到功能范围

---

helper.js

import AppService from '../lib/service';

export function resetFibonacci() {
    AppService.resetNextFibonacci().then(data => {
        this.setState({ value: data.data.reset })
    });    
}

注意：使用函数代替箭头函数“（）=>{}”

Fibonacci.js（您的组件）

注意：将此绑定到功能范围

---

您可以创建一个生成组件（其中包含核心功能）的函数，并将差异作为参数传递

    // componentGenerator.js
    import React, { Component } from 'react';
    import AppService from '../lib/service';

    const componentGenerator = (getNextThing, resetThing, title) => (
    class extends Component {

        constructor(props) {
            super(props);

            this.state = {
                value: '',
            }
        }

        getNext() {
            AppService[getNextThing]().then(data => {
                this.setState({ value: data.data.gen })
            })
        }

        reset() {
            AppService[resetThing]().then(data => {
                this.setState({ value: data.data.reset })
            })
        }

        render() {
            return (
                <div className={'functionsWrapper'}>
                    <h2> {title} </h2>
                    <p> Click to get the next value in the sequence </p>
                    <button onClick={() => this.getNext()}> Get Next</button>
                    <button onClick={() => this.reset()}> Reset </button>

                    <div>
                        <input type="text" id="body" defaultValue={this.state.value} name="body" className="form-input" />
                    </div>
                </div>
            )
        }
    })

    export default componentGenerator;


    // Factorial.js
    import componentGenerator from './componentGenerator';

    export default withRouter(componentGenerator('getNextFactorial', 'resetNextFactorial', 'Factorial Sequence Generator'));


    // Fibonacci.js
    import componentGenerator from './componentGenerator';

    export default withRouter(componentGenerator('getNextFibonacci', 'resetNextFibonacci', 'Fibonacci Sequence Generator'));

//componentGenerator.js
从“React”导入React，{Component}；
从“../lib/service”导入AppService；
常量组件生成器=（getNextThing、resetThing、title）=>(
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
}
}
getNext（）{
AppService[getNextThing]（）。然后（数据=>{
this.setState（{value:data.data.gen}）
})
}
重置（）{
AppService[resetThing]（）。然后（数据=>{
this.setState（{value:data.data.reset}）
})
}
render（）{
返回(
{title}
单击以获取序列中的下一个值

this.getNext（）}>Get Next
this.reset（）}>reset
)
}
})
导出默认组件生成器；
//Factorial.js
从“./componentGenerator”导入componentGenerator；
使用路由器导出默认值（componentGenerator（'GetNextFactory'，'ResetNextFactory'，'Factorial Sequence Generator'）；
//斐波那契
从“./componentGenerator”导入componentGenerator；
使用路由器导出默认值（componentGenerator（'getNextFibonacci'，'resetNextFibonacci'，'Fibonacci Sequence Generator'）；

您可以创建一个生成组件的函数（其中包含核心功能），并将差异作为参数传递

    // componentGenerator.js
    import React, { Component } from 'react';
    import AppService from '../lib/service';

    const componentGenerator = (getNextThing, resetThing, title) => (
    class extends Component {

        constructor(props) {
            super(props);

            this.state = {
                value: '',
            }
        }

        getNext() {
            AppService[getNextThing]().then(data => {
                this.setState({ value: data.data.gen })
            })
        }

        reset() {
            AppService[resetThing]().then(data => {
                this.setState({ value: data.data.reset })
            })
        }

        render() {
            return (
                <div className={'functionsWrapper'}>
                    <h2> {title} </h2>
                    <p> Click to get the next value in the sequence </p>
                    <button onClick={() => this.getNext()}> Get Next</button>
                    <button onClick={() => this.reset()}> Reset </button>

                    <div>
                        <input type="text" id="body" defaultValue={this.state.value} name="body" className="form-input" />
                    </div>
                </div>
            )
        }
    })

    export default componentGenerator;


    // Factorial.js
    import componentGenerator from './componentGenerator';

    export default withRouter(componentGenerator('getNextFactorial', 'resetNextFactorial', 'Factorial Sequence Generator'));


    // Fibonacci.js
    import componentGenerator from './componentGenerator';

    export default withRouter(componentGenerator('getNextFibonacci', 'resetNextFibonacci', 'Fibonacci Sequence Generator'));

//componentGenerator.js
从“React”导入React，{Component}；
从“../lib/service”导入AppService；
常量组件生成器=（getNextThing、resetThing、title）=>(
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
}
}
getNext（）{
AppService[getNextThing]（）。然后（数据=>{
this.setState（{value:data.data.gen}）
})
}
重置（）{
AppService[resetThing]（）。然后（数据=>{
this.setState（{value:data.data.reset}）
})
}
render（）{
返回(
{title}
单击以获取序列中的下一个值

this.getNext（）}>Get Next
this.reset（）}>reset
)
}
})
导出默认组件生成器；
//Factorial.js
从“./componentGenerator”导入componentGenerator；
使用路由器导出默认值（componentGenerator（'GetNextFactory'，'ResetNextFactory'，'Factorial Sequence Generator'）；
//斐波那契
从“./componentGenerator”导入componentGenerator；
使用路由器导出默认值（componentGenerator（'getNextFibonacci'，'resetNextFibonacci'，'Fibonacci Sequence Generator'）；

我真的很想