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

您可以看到下面的代码，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>
        )
    }
 }

您可以创建一个单独的doStuff.js

然后在组件中导入它

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});
...

---

对于快速回答，一个问题是如何在doStuff.js中应用这个.setState{slideIndex:1}？thxIt最好只从doStuff返回值，然后在父组件中设置状态。否则，您可以创建一个函数来设置父组件内的状态，然后将该函数作为道具传递给doStuff，并将其作为道具进行调用。很抱歉，我不知道，但您能否向我展示将该函数作为道具传递给doStuff的代码？我所知道的只是将函数作为道具传递给子组件，如下所示：。对于快速回复，我的意思是你可以通过回调dostuffish.state.slideIndex，result=>this.setState{slideIndex:result}@caberg为答案添加了一个示例

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