Reactjs 重构反应代码

我有一个类组件，它是一个标题栏，当你点击一个图标时，会弹出一个对话框，你可以在其中输入数据并保存它。我试图将这两个项目-标题栏和对话框拆分为两个不同的组件。将标题栏组件重定向到新对话框组件是执行此操作的最佳方法。目前我把它们都放在一个组件中。谢谢你的建议

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

const{classes}=this.props
返回(
添加文件夹
取消
创造
);

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

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

在下面的代码中，功能组件是在主组件类内部创建的，因此它可以访问

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

DialogBox=（{state}）=>(
添加文件夹
取消
创造
)

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

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

const{classes}=this.props
返回(
);

对不起，我不太明白你在说什么。我是否应该将标题栏包装为HOC，因为它不允许我使用语法否，您不必再次重定向或包装，相反，您可以将对话框作为一个组件（回答代码段1），将应用程序标题作为另一个组件。渲染将类似于代码片段2，在其中可以将对话框视为单个组件

我需要管理对话框的外观，因此我无法将其设置为无状态组件。我必须从textfield获取详细信息，如果你是说，打开/关闭状态，可以在父组件本身的状态下进行管理。

open

prop-in只需要一个true或false值，而不考虑状态或属性。如果您仍然希望在非无状态组件中使用对话框，您仍然可以使用与前面提到的类似的方法，将对话框导入该组件本身。