有没有办法将功能代码拆分到另一个文件或组件？

Question

您可以在下面看到代码，myFunc的代码很长。有什么办法可以将此代码拆分到另一个文件或组件？ thx

 import React, { Component } from 'react'
 export default class Untitled-1 extends Component {
    state = {
       first: true,
       slideIndex: "2",
    }
    myFunc(){
      if(this.state.slideIndex === "2"){
         // do stuff
      }else {
         // do stuff
      }
      //this function have a long long code
    }
    render() {
        return (
            <div>
                <button onClick={() => this.myFunc()}>click me</button>
            </div>
        )
    }
 }

Answer 1

您可以单独创建doStuff.js

const doStuff = (slideIndex) => {
    if (slideIndex === '2') {
        // do some logic
        // maybe return something
    }
    ...
})
export default doStuff

然后在您的组件中将其导入

import doStuff from './doStuff.js';
...
myFunc() {
    doStuff(this.state.slideIndex);
...

从助手操作状态

助手

const doStuff = (slideIndex, cb) => {
    if (slideIndex === '2') {
        // do some logic
        cb('slideIndex is now this!')
    }
    ...
})
export default doStuff

主要组件

import doStuff from './doStuff.js';
...
myFunc() {
    doStuff(this.state.slideIndex, (result) => this.setState({slideIndex: result});
...