Question

我有一个React视图控制器组件，其中包含许多很酷的功能，但它的增长非常大。我已经将所有演示组件分解为自己的文件。我通常喜欢保持我的文件很短（大约500行或更少），这一行有700多行，所以它不是很大，但我认为它很快就会失控。我的问题是：

有哪些方法可以处理具有大量功能的视图控制器的大小？还有其他人遇到过这个问题吗？

Answer 1

thig可能会帮助您：

首先，创建一个类似这样的视图：

import React, { Component } from "react"; 
//  controller
import HomeController from "../../controllers/danishControler"; 


class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
       data: 0
    }
  }

  render() {
    console.log("the set value is "+this.state.data)
    return (
      <div className="App"> 

       <HomeController data={this.state.data}>
         { data=>
         <div>
            <p>{data.obj.Name}</p>
            <p>{data.obj.FatherName}</p>
            <p>{data.obj.msg}</p>
            </div>
        }
       </HomeController>
      </div>
    );
  }
}

export default App;

这是控制器代码，我使用箭头功能对此代码进行了编码，因为我不需要状态

 // model
 import homeModal from "../models/homeModel";
 const HomeController = props => {
  const { name, fatherName, msg } = homeModal(props.data);
  console.log(name+fatherName+msg)
  return props.children({
    obj: {
      Name: name,
      FatherName: fatherName,
      msg:msg
    }
  });
};
export default HomeController;

这是模型

var msg ,  name ,fatherName;
var returnObj;

function homeModal(props){


    console.log("value of data is " )
    switch(props) {
        case 1:
                name =   "Danish "
                fatherName ="Abdur Rehman" 
                msg="Your Data has Fetched "
                returnObj = { name, fatherName , msg} 
                break
        case 2:
                name = "Rashid Iqbal" 
                fatherName ="Muhammad Iqbal" 
                msg="Your Data has Fetched "
                returnObj = { name, fatherName , msg} 
                break
        default:
                msg = "Data Not Found"
                returnObj = {msg} 
                break
    }


    return returnObj

}

export default homeModal

如何处理不断增长的React视图控制器组件

1 个答案: