从一个动作中调用一个组件 - 反应

Question

我在我的应用程序中使用功能组件，最初它有一个包含大量代码的组件，我将它分成 3 个以便能够更好地组织代码并拥有可重用的组件，第一个包含一个 <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; 

表格

export default function AddSuscription(props){

    const initialState={code:0, email:'', alias:''}

    const[subscription, setSubscription]=useState(initialState);

    const handleChange=(event)=>{
        setSubscription({...subscription,[event.target.name]:event.target.value})
    }

    const handleSubmit=(event)=>{

        event.preventDefault();

        if(!subscription.code || !subscription.email || !subscription.alias) 
            return
                const postSubscription=async()=>{
                    try {
                        axios.post('/api/Subscription/add',subscription);
                        props.history.push('/Subscription'); 
                    }
                    catch (error) {
                        console.log('error', error);
                    }
                }
                postSubscription();
    } 
return(
<div> 
                                  <form onSubmit={handleSubmit} >
                                      <TextField
                                          id="filled-name"
                                          name="code"
                                          label="Code"
                                          value={subscription.code}
                                          onChange={handleChange}
                                          margin="normal"
                                      />
                                      <TextField
                                          id="filled-name"
                                          label="Email"
                                          value={subscription.email}
                                          name="email"
                                          onChange={handleChange}
                                          margin="normal"
                                      />
                                      <TextField
                                          id="filled-multiline-static"
                                          label="Alias"
                                          value={subscription.alias}
                                          name="alias"
                                          onChange={handleChange}
                                          margin="normal"
                                      />
                                      <Button
                                          variant="contained"
                                          color="primary"
                                          type="submit">
                                          Add
                                      </Button>
                                  </form>
<div> 
);
}

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
      {/* ... */}
    />