javascript - 如果我以这种方式编程，我是否有更多的概述？

Question

我开始学习 Reactjs，我想知道最佳实践。我有以下页面: -家 -BMI计算器 -等等

我的问题是，我的所有逻辑(即“calculateBmi”)都应该在我的 Bmi.js 中吗？还是应该将它们放在我的 App.js 文件中？

这方面的最佳做法是什么？因为当我制作更多小项目时，App.js 文件将包含许多不同的功能。

我认为最好的做法是将所有功能放在 Bmi.js 中。但你的意见是什么？我刚开始学习 Reactjs。

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import Header from './components/layout/Header';
import Homepage from './components/Homepage';

import Bmi from './components/bmiCalculator/Bmi';
import CalculateBmi from './components/bmiCalculator/CalculateBmi';


class App extends Component {

  calculateBmi = (length, weight) => {

    const lengthInMeters = length / 100;
    const bmi = weight / (lengthInMeters * lengthInMeters);

    console.log(bmi);
  }

  render() {
    return (
      <Router>
        <div className="App">
          <Header />
          <Route exact path="/" render={props => (
            <React.Fragment>
              <Homepage />
            </React.Fragment>
          )} />

          <Route path="/bmicalculator" render={props => (
            <React.Fragment>
              <Bmi calculateBmi={this.calculateBmi} />
            </React.Fragment>
          )} />
        </div>
      </Router>

    );
  }
}


export default App;

Bmi.js

import React, { Component } from 'react';

export class Bmi extends Component {

    state = {
        length: '',
        weight: ''
    }

    onSubmit = (e) => {
        e.preventDefault();
        this.props.calculateBmi(this.state.length, this.state.weight);
        this.setState({ length: '' });

    }

    onChange = (e) => this.setState({ [e.target.name]: e.target.value });

    render() {
        return (
            <div className="bmiborder">
                <h1 style={titleStyle}>BMI Healthy Weight Calculator</h1>
                <div style={resultStyle} className="bmiResultContainer">
                    <p>Body Mass Index(BMI) = 20.9</p>
                    <p>Normal weight</p>
                </div>
                <form onSubmit={this.onSubmit}>
                    <div className="background">
                        <div className="inputGroup">
                            Length (cm)<input type="number" name="length" placeholder="180" value={this.state.length} onChange={this.onChange}></input>
                        </div>
                    </div>
                    <div className="background">
                        <div className="inputGroup">
                            Weight (kg)<input type="number" name="weight" placeholder="75" value={this.state.weight} onChange={this.onChange}  ></input>
                        </div>
                    </div>
                    <div className="background">
                        <div className="inputGroup">
                            <input type="submit" value="Calculate" style={buttonStyle}></input>
                        </div>
                    </div>
                </form>
            </div >

        )
    }

}



const titleStyle = {
    color: "White"
}

const resultStyle = {
    margin: "0",
    padding: "0"
}

const buttonStyle = {
    backgroundColor: "#ff4081",
    color: "white",
    border: "none",
    width: "150px",
    height: "36px",
    borderRadius: "3px",
    cursor: "pointer",
}

export default Bmi;

Answer 1

你的方法应该放在尽可能低的位置，即在它们真正关心的组件中，即在这种情况下在 Bmi.js 中

此外，我会考虑将域逻辑和表示(具有相应的域和 ui 存储)分开，这样您最终会得到一个可以重用于 Web 和移动版本的架构。