重构react代码

Question

我有一个类组件，它是一个标题栏，当您单击一个图标时，会弹出一个对话框，您可以在其中输入数据并保存它。我试图将这两个项目-标题栏和对话框-分成两个不同的组件。是将从标题栏组件重定向到新对话框组件的最佳方法。目前，我将他们两个都放在一个component.Thanks中，以获得建议。

    const{classes} = this.props
    return (
        <div>
            <Dialog
                open={this.state.open}
                onClose={this.handleClose}
                aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">Add Folder</DialogTitle>
                <DialogContent>
                <TextField
                    margin="normal"
                    onChange={this.handleChange('name')}
                  />
                </DialogContent>
                <DialogActions>
                    <Button onClick={this.handleClose} color="primary">
                    Cancel
            </Button>
                <Button onClick={this.handleClose} color="primary"
                    onChange={this.handleFieldChange}
                    value={this.state.value}>
                    Create
            </Button>
                </DialogActions>
            </Dialog>
            <AppBar position="static" className={classes.bar} >
                <Toolbar>
                    <IconButton color="inherit" aria-label="createfolder">
                        <SvgIcon>
                            <path d={createfolder}
                                onClick={this.handleClickOpen} 
                                name="firstName"/>
                        </SvgIcon>
                    </IconButton>
                </Toolbar>
            </AppBar>

        </div>
    );

Answer 1

不，最好的方法不是重定向，而是以更模块化或组件/反应的方式进行重定向。您可以创建对话框的功能组件，并将其包含在您的主组件中。

在下面的代码中，功能组件是在main component类中创建的，因此它可以访问this。

   DialogBox = ({state}) =>(
      <Dialog
            open={state.open}
            onClose={this.handleClose}
            aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">Add Folder</DialogTitle>
            <DialogContent>
            <TextField
                margin="normal"
                onChange={this.handleChange('name')}
              />
            </DialogContent>
            <DialogActions>
                <Button onClick={this.handleClose} color="primary">
                Cancel
        </Button>
            <Button onClick={this.handleClose} color="primary"
                onChange={this.handleFieldChange}
                value={state.value}>
                Create
        </Button>
            </DialogActions>
        </Dialog>
      )

现在将其包含在标题栏组件中，

const{classes} = this.props
    return (
        <div>
            <AppBar position="static" className={classes.bar} >
                <Toolbar>
                    <IconButton color="inherit" aria-label="createfolder">
                        <SvgIcon>
                            <path d={createfolder}
                                onClick={this.handleClickOpen} 
                                name="firstName"/>
                        </SvgIcon>
                    </IconButton>
                </Toolbar>
            </AppBar>
           <this.DialogBox state={this.state}/>
        </div>
    );