时间戳

首页 > 解决方案 > 有没有办法将功能代码拆分到另一个文件或组件？

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

问题描述

你可以看到下面的代码，myFunc有一个很长的代码。有没有办法将此代码拆分为另一个文件或组件？谢谢

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

标签： reactjs

解决方案

你可以做一个单独的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);
...

从 Helper 操作状态

帮手

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

推荐阅读