如何正确地将一个组件的代码拆分为多个子组件？

Question

I have a component MyComp with a long code that I want to split into 3 components.

My goal is to get the following setup of MyComp . I appreciate general guidelines and a small example in an answer:

import React, { Component, Fragment } from 'react'
import { TopControls, Main, BottomBar } from './layouts'

export default class extends Component {
  render() {
    return <Fragment>

      <TopControls />

      <Main />

      <BottomBar />

    </Fragment>
  }
}

Below I provide the code of MyComp . My particular doubt is where should I move const styles and all functions, eg updateDelay , etc., because they would be shared among components TopControls , Main and BottomBar :

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '@material-ui/core/styles/withStyles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import TextField from '@material-ui/core/TextField';
import LinePlot from '../chart/LinePlot';
import BrushBarPlot from '../chart/BrushBarPlot';
import FormControl from '@material-ui/core/FormControl';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import AppBar from '@material-ui/core/AppBar';
import InputAdornment from '@material-ui/core/InputAdornment';


const styles = theme => ({
    header: {
        borderBottom: 'solid 1px rgba(0,0,0,0.4)',
        backgroundColor: '#253069',
        color: '#d2d6ef',
        overflow: 'hidden',
        boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
        position: 'relative',
        height: '12%'
    },
    h1: {
        fontSize: '30px',
        textAlign: 'center',
        fontFamily: 'sans-serif',
        lineHeight: '1.45em',
        webkitFontSmoothing: 'antialiased'
    },
    h3: {
        fontSize: '20px',
        textAlign: 'left',
        fontFamily: 'sans-serif',
        lineHeight: '1.45em',
        marginLeft: theme.spacing.unit*2,
        webkitFontSmoothing: 'antialiased'
    },
    appBar: {
      top: 'auto',
      bottom: 5,
      height: '10%'
    },
    toolbar: {
      alignItems: "center",
      justifyContent: "space-between"
    },
    textField: {
      fontSize: '12px',
      margin: theme.spacing.unit,
      minWidth: 120
    },
    formControl: {
      fontSize: '12px',
      margin: theme.spacing.unit,
      minWidth: 120
    },
    predictedDelay: {
        marginTop: '10px',
        position: 'relative',
        minWidth: 350,
        maxWidth: 350,
        textAlign: 'center',
        fontFamily: 'sans-serif',
        backgroundColor: 'rgb(225, 0, 80)'
    },
    predictedDelayText: {
        fontSize: '18px'
    },
    topControls: {
        borderBottom: '1px solid #ddd',
        height: '25%',
        boxShadow: '0 1px 4px rgba(0,0,0,0.08)',
        background: 'white',
        marginLeft: theme.spacing.unit*2,
        marginRight: theme.spacing.unit*2,
    },
    mainPart: {
        webkitJustifyContent: 'space-between',
        justifyContent: 'space-between',
        marginTop: '30px',
        marginBottom: '50px',
        paddingTop: '2px',
        position: 'relative',
        backgroundColor: '#f7f7f7'
    },
    card: {
        maxWidth: 200
    },
    paper: {
        backgroundColor: '#f7f7f7',
        padding: theme.spacing.unit * 2,
        height: '70%',
        marginLeft: theme.spacing.unit * 2,
        marginRight: theme.spacing.unit * 2,
    },
    buttons: {
        display: 'flex',
        justifyContent: 'flex-end',
    },
    rightIcon: {
        marginLeft: theme.spacing.unit,
    },
    button: {
        marginTop: theme.spacing.unit * 3,
        marginLeft: theme.spacing.unit,
    }
});


class MyComp extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            holdingTime: 1,
            plannedDep: "2017-05-24T10:30",
            schedTurnd: 45,
            asma40: 100,
            asma60: 500,
            taxiInTime: 9.50,
            wake: 84.73,
            temperature: 20,
            visibility: 5999.66,
            windIntensity: 8.0,
            arrivalDelay: 5,
            distanceTarget: 500,,
            delay: 0,
            delay_probability: 0,
            delay_cat: "NA",
            chartDataWake: [],
            chartDataTurnaround: [],
            chartDataArrivalDelay: [],
            chartDataDistanceTarget: [],
            labelWidth: 0
        };
        this.handleChange = this.handleChange.bind(this);
    };

    componentDidMount() {
        this.fetchData();
    };

    updateDelay(predicted_delay,delay_probability) {
        this.state.chartDataWake = [...this.state.chartDataWake, {wake: this.state.wake===84.73 ? "H" : (this.state.wake===14.78 ? "M" : "L"), delay: predicted_delay}];
        this.state.chartDataTurnaround = [...this.state.chartDataTurnaround, {turnaround: this.state.schedTurnd, delay: predicted_delay}];
        this.state.chartDataArrivalDelay = [...this.state.chartDataArrivalDelay, {arrivalDelay: this.state.arrivalDelay, delay: predicted_delay}];
        this.state.chartDataDistanceTarget = [...this.state.chartDataDistanceTarget, {distanceTarget: this.state.distanceTarget, delay: predicted_delay}];
        this.setState({
          delay: predicted_delay,
          delay_probability: delay_probability,
          delay_cat: predicted_delay===0 ? "<15" : (predicted_delay===1 ? "[15; 45]" : ">45")
        });
    };

    fetchData = () => {
        const url = "http://localhost:8000?"+
          'holdingTime='+this.state.holdingTime+
          '&plannedDep='+this.state.plannedDep+
          '&schedTurnd='+this.state.schedTurnd+
          '&asma40='+this.state.asma40+
          '&asma60='+this.state.asma60+
          '&taxiInTime='+this.state.taxiInTime+
          '&wake='+this.state.wake+
          '&temperature='+this.state.temperature+
          '&visibility='+this.state.visibility+
          '&windIntensity='+this.state.windIntensity+
          '&arrivalDelay='+this.state.arrivalDelay+
          '&distanceTarget='+this.state.distanceTarget;

        fetch(url, {
          method: "GET",
          dataType: "JSON",
          headers: {
            "Content-Type": "application/json; charset=utf-8",
          }
        })
        .then((resp) => {
          return resp.json()
        })
        .then((data) => {
          this.updateDelay(data.prediction,data.probability)
        })
        .catch((error) => {
          console.log(error, "catch the hoop")
        })
    };

    handleChange = (name, event) => {
      this.setState({
        [name]: event.target.value
      }, () => {
        console.log("plannedDep",this.state.plannedDep)
      });
    };


    handleReset = () => {
        this.setState({
            chartDataWake: [],
            chartDataTurnaround: [],
            chartDataArrivalDelay: [],
            chartDataDistanceTarget: [],
            delay: 0,
            delay_probability: 0,
            delay_cat: "NA"
        });
    };

    render() {
        const { classes } = this.props;

        return (
        <React.Fragment>
            <CssBaseline />

            <div className={classes.header}><h1 className={classes.h1}>Prediction of departure delays for a single flight</h1></div>

            <div className={classes.topControls}>
              <Grid container spacing={24}>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="outlined-simple-start-adornment"
                      className={classes.textField}
                      onChange={(event) => this.handleChange("holdingTime", event)}
                      value={this.state.holdingTime}
                      margin="normal"
                      label="Holding time"
                      type="number"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(seconds)</InputAdornment>,
                      }}
                      onInput = {(e) =>{
                          e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Additional ASMA 40"
                      onChange={(event) => this.handleChange("asma40", event)}
                      value={this.state.asma40}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(minutes)</InputAdornment>,
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Additional ASMA 60"
                      onChange={(event) => this.handleChange("asma60", event)}
                      value={this.state.asma60}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(minutes)</InputAdornment>,
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                    required
                    name="plannedDep"
                    id="datetime-local"
                    onChange={(event) => this.handleChange("plannedDep", event)}
                    value={this.state.plannedDep}
                    label="Scheduled departure"
                    type="datetime-local"
                    className={classes.textField}
                    margin="normal"
                    InputLabelProps={{
                      shrink: true,
                    }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Planned turnaround"
                      onChange={(event) => this.handleChange("schedTurnd", event)}
                      value={this.state.schedTurnd}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(minutes)</InputAdornment>,
                      }}
                      onInput = {(e) =>{
                          e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Taxi-In time"
                      onChange={(event) => this.handleChange("taxiInTime", event)}
                      value={this.state.taxiInTime}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(seconds)</InputAdornment>,
                      }}
                      onInput = {(e) =>{
                          e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                      }}
                  />
                </Grid>
              </Grid>
              <Grid container spacing={24}>
                <Grid item xs={2}>
                    <FormControl
                        required
                        className={classes.formControl}
                        margin="normal">
                        <InputLabel shrink htmlFor="wake-label-placeholder">
                                Wake
                        </InputLabel>
                        <Select
                          onChange={(event) => this.handleChange("wake", event)}
                          value={this.state.wake}
                          input={<Input name="wake" id="wake-label-placeholder" />}
                          displayEmpty
                          name="wake"
                        >
                          <MenuItem value={84.73}>Heavy</MenuItem>
                          <MenuItem value={14.78}>Medium</MenuItem>
                          <MenuItem value={0.49}>Light</MenuItem>
                        </Select>
                    </FormControl>
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Temperature"
                      onChange={(event) => this.handleChange("temperature", event)}
                      value={this.state.temperature}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(Celsius)</InputAdornment>,
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Visibility"
                      onChange={(event) => this.handleChange("visibility", event)}
                      value={this.state.visibility}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start"></InputAdornment>,
                      }}
                      onInput = {(e) =>{
                          e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Wind Intensity"
                      onChange={(event) => this.handleChange("windIntensity", event)}
                      value={this.state.windIntensity}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(knots)</InputAdornment>,
                      }}
                      onInput = {(e) =>{
                          e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Arrival delay"
                      onChange={(event) => this.handleChange("arrivalDelay", event)}
                      value={this.state.arrivalDelay}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(minutes)</InputAdornment>,
                      }}
                      onInput = {(e) =>{
                          e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                      }}
                  />
                </Grid>
                <Grid item xs={2}>
                  <TextField
                      required
                      id="standard-number"
                      label="Distance to target"
                      onChange={(event) => this.handleChange("distanceTarget", event)}
                      value={this.state.distanceTarget}
                      type="number"
                      className={classes.textField}
                      margin="normal"
                      InputProps={{
                          startAdornment: <InputAdornment position="start">(km)</InputAdornment>
                      }}
                      onInput = {(e) =>{
                          e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                      }}
                  />
                </Grid>
              </Grid>
            </div>




            <main className={classes.mainPart}>
                <Grid container spacing={24}>
                    <Grid item xs={12} sm={6} >
                        <div className={classes.h3}>Wake group</div>
                        <BrushBarPlot chartData={this.state.chartDataWake} varname="wake"/>
                    </Grid>
                    <Grid item xs={12} sm={6} className={classes.card}>
                        <div className={classes.h3}>Turnaround time</div>
                        <LinePlot chartData={this.state.chartDataTurnaround} varname="turnaround"/>
                    </Grid>
                    <Grid item xs={12} sm={6} >
                        <div className={classes.h3}>Arrival delay of a flight</div>
                        <LinePlot chartData={this.state.chartDataArrivalDelay} varname="arrivalDelay"/>
                    </Grid>
                    <Grid item xs={12} sm={6} className={classes.card}>
                        <div className={classes.h3}>Distance to target</div>
                        <LinePlot chartData={this.state.chartDataDistanceTarget} varname="distanceTarget"/>
                    </Grid>
                </Grid>
            </main>

            <AppBar position="fixed" color="primary" className={classes.appBar}>
              <div className={classes.toolbar}>
                  <Grid container spacing={24}>
                      <Grid item xs={6} sm={3}>
                          <Button variant="contained" color="primary" onClick={this.fetchData} className={classes.button}>
                              Predict
                              <Icon className={classes.rightIcon}>send</Icon>
                          </Button>
                          <Button variant="contained" color="primary" onClick={this.handleReset} className={classes.button}>
                              Reset
                              <Icon className={classes.rightIcon}>clear</Icon>
                          </Button>
                      </Grid>
                      <Grid item xs={6} sm={2}>
                          <Card className={classes.predictedDelay}>
                              <CardActionArea>
                                  <CardContent>
                                      <div className={classes.predictedDelayText}>
                                          Delay class: {this.state.delay_cat} <span> </span>
                                          (Prob.: {this.state.delay_probability})
                                      </div>
                                  </CardContent>
                              </CardActionArea>
                          </Card>
                      </Grid>
                  </Grid>
              </div>

            </AppBar>
        </React.Fragment>
        );
    }
}

MyComp.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MyComp);

Answer 1

Just pass the common functions as prop, so all of the children will reach:

render() {
  return (
    <Fragment>
      <TopControls onUpdateDelay={this.updateDelay} />
      <Main onUpdateDelay={this.updateDelay} />
      <BottomBar onUpdateDelay={this.updateDelay} />
    </Fragment>
  ) 
}

Plus you can put all the common styles into an external styles.css file and import it in all components like this:

import '../relative/path/to/styles.css';

class MyComp extends React.Component {...

You should set up your webpack, parcel etc. packager properly to enable css import.