如何呈现表格行中的数据并将其呈现给另一个组件？

如何解决如何呈现表格行中的数据并将其呈现给另一个组件？

我有一个显示表的组件，其列之一具有字段Actions，该字段具有按钮（查看，编辑，删除等）。单击按钮时，我需要渲染另一个组件（组件是一个弹出窗口）并传递表中的数据，以便它以某种形式显示数据，而我需要进一步添加。

我通过传入onClick设法从其行中获取当前数据。我试图使用状态来渲染另一个组件，但是没有成功。我正在使用Semantic-UI React组件来显示带有动画的按钮。

这是具有表的代码，

const MainContent = () => {
  const [actions,setActions] = useState(false);
 
  const handleView = (rowData) => {
    console.log(rowData);
    setActions(true);
    if (actions == true) return <ParentView />;
  };

  ....
  ....

  const contents = (item,index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          <td>{item.appName}</td>
          <td></td>
          <td>{item.createdTs}</td>
          <td>{item.pattern}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <Button animated onClick={() => handleView(item)}>
              <Button.Content visible>View</Button.Content>
              <Button.Content hidden>
                <Icon name="eye" />
              </Button.Content>
            </Button>
          </td>
        </tr>
        {item.routeChildEntry.map(routeContents)}
      </>
    ) : (
      ....
      ....
      ....
    );
  };

  return (
    <div>
     
      ....
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes,index) => {
                            return routes.map(contents,index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    ....
                    ....
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;

下面是在单击按钮时呈现的组件，

import React from "react";
import Popup from "reactjs-popup";
import { Icon } from "semantic-ui-react";

const Parent = (props) => {
  return (
    <Popup trigger={<Icon link name="eye" />} modal closeOnDocumentClick>
      <h4>in parent</h4>
    </Popup>
  );
};

export default Parent;

如何在单击按钮时渲染另一个组件并将数据传递给它？

解决方法

数据可以作为道具传递给其他组件。

例如，如果您的组件是<ParentView />，并且您要传递的数据包含在变量rowData中，则可以将其传递为：

<ParentView dataPassedByAkhil = {rowData}/>

然后在您的ParentView组件中

export default function ParentView({dataPassedByAkhil}) {

console.log(dataPassedByAkhil);

或者，您也可以接受以下数据作为道具

export default function ParentView(props) {

console.log(props.dataPassedByAkhil);

如果要打开和关闭另一个弹出窗口，则可以像上面一样传递状态。

<PopupComponent open={stateSetForPopupByParent}/>

Example of popup using state.

上面的更新链接，介绍了如何从按钮行向对话框传递数据

Here is the full code:

export default function FormDialog() {
  const [open,setOpen] = React.useState(false);
  const [valueofRow,setValueOfRow] = React.useState();

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

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button
        variant="outlined"
        color="primary"
        onClick={() => {
          handleClickOpen("John");
        }}
      >
        Row 1 - value is John
      </Button>
      <br />
      <br />
      <Button
        variant="outlined"
        color="primary"
        onClick={() => {
          handleClickOpen("Sally");
        }}
      >
        Row 2 Value is Sally
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="edit-apartment"
      >
        <DialogTitle id="edit-apartment">Edit</DialogTitle>
        <DialogContent>
          <DialogContentText>Dialog fired using state</DialogContentText>
          <h1>{valueofRow} was clicked and passed from the row</h1>
          <TextField
            autoFocus
            margin="dense"
            id="field"
            label="some field"
            type="text"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="secondary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}