Question

我在我的应用程序中使用功能组件，最初它有一个包含大量代码的组件，然后将其分为3个以便能够更好地组织代码并具有可重用的组件，第一个包含一个{{1} }，第二个<MaterialTable>和第三个<dialog>。

在表所在的组件中导入<form>，在<dialog>组件中导入<dialog>，这样表单就位于对话框和我想要的对话框中从董事会的行动发送给呼叫。

问题在于，在操作中添加组件时，出现以下错误

<form>

如何通过表中的操作打开组件？

表

Expected an assignment or function call and instead saw an expression

对话框

export default function User(){ 

const[user, setUser]= useState({Users:[]});

 useEffect(()=>{
    const getUser=async()=>{
            const response =await axios.get('/api/users');
            setUser(response.data);
            console.log(response.data)
    }
    getUser();
},[]);

return(
<div>
     <MaterialTable
         title="Users"
         columns={[
             { title: 'Code', field: 'code' , type: 'numeric'},
             { title: 'Name', field: 'name' },
             { title: 'Lastname', field: 'lastname' },
             { title: 'Age', field: 'age', type: 'numeric'},
         ]}
         data={user.Users}
actions={[   
    {
      icon: 'event',
      tooltip: 'Agregar cita', 
      onClick:(event, rowData)=>{
        //event.preventDefault();

        <Dialogs/>

     }
    }
  ]} 
         />
 </div>
        );
        }

表格

function Dialogs(){
    const [open, setOpen] = useState(false);

    const handleClickOpen = () => {
      setOpen(true);
    };

    const handleClose = () => {
      setOpen(false);
    };
    return(
        <div>
                      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                      <DialogTitle id="form-dialog-title">Subscription></DialogTitle>
                          <DialogContent>
                              <DialogContentText>
                                  Subscription
                              </DialogContentText>
                    <AddSuscription/>
                          </DialogContent>
                      <DialogActions>
                        <Button onClick={handleClose} color="primary">
                          Cancel
                        </Button>
                      </DialogActions>
                    </Dialog>
        </div>
    )
}
export default Dialogs;

Answer 1

onClick:(event, rowData)=>{
    <Dialogs/>
 }

您不能从这样的事件处理程序进行渲染。您究竟希望该组件显示什么？ React不能那样工作。

相反，保留一些状态，更改该状态（这会自动重新呈现您的组件），然后根据该状态有条件地确定您想要的内容。

类似这样的东西：

将状态添加到需要呈现对话框的主要组件中：

export default function User() { 
  const [showDialog, setShowDialog] = useState(false)
  //...

更改事件处理程序以更改该状态

onClick:(event, rowData)=>{
  setShowDialog(true)
}

在主渲染中，有条件地渲染<Dialogs>组件。

返回（

<div>
    {showDialog && <Dialogs/>}
    <MaterialTable
      {/* ... */}
    />

从动作调用组件

1 个答案: