如何正确处理 React 道具

Question

我在这里发布这篇文章是因为我对 React 比较陌生，不知道我到底应该做什么 google。在我的 React 项目中，我有一个 kendo 网格，其中有一个名为 OPTIONS 的自定义列，如下所示：

 <Grid onDataStateChange={onDataStateChange}
            data={result}
            {...{skip:0, take:13}}>
            <GridColumn cell={CommandCell} title="Options"/>
            <GridColumn field="session_id" title="Session" filter='text'/>
            <GridColumn field="sn_zag_id" title="Service" filter='text'/>

Option列定义如下：

const [visible2, setVisible2] = useState(false);
const [snZagId, setSnZagId] = useState();

const toggleDialogPrilog = (props) => {
    setVisible2(!visible2);
    setSnZagId(props.dataItem.sn_zag_id)
  }

const CommandCell = (props) => <Options {...props}/>

const Options= (props) => {
  return <td className="k-command-cell">
  <div style={{marginTop:'2%'}}>
       <Button style={{width:'8vw',marginTop:'2%'}}
        onClick={()=>toggleDialogPrilog(props)}>
        Add
        </Button></>}
  </div>
  { visible2 && 
       <Dialog onClose={()=> toggleDialogPrilog()} title={"Add"} style={{width:'50%'}}>
    <Prilog snZagId={snZagId}/>
    </Dialog>
  }
  </td>;}

因此，在选项列中，我有一个添加按钮，单击该按钮时，会打开一个对话框，其中包含 PRILOG 组件。我所说的网格很大，由 13 行的页面组成。一切正常，所以当我单击“添加”按钮时，对话框打开，该行带有自定义 material。但问题是，如果我打开 console/inspect，我可以看到当我点击添加时，同时打开了 13 个对话框：

我在某种程度上知道，当我单击“添加”时，所有对话框都会呈现，因为我发送了道具，但我不知道如何停止它。换句话说，我如何修改我的代码，以便在我单击“添加”时只打开一个 (1) 个对话框？

Answer 1

我设法以某种方式解决了问题，但我不知道到底有什么区别。我没有将 Options 组件放在同一个 jsx 文件中，而是创建了另一个名为 SessionOptions 的组件，如下所示：

Session.jsx:

import SessionOptions from '../../Popup/SesijaOpcije';
...
const CommandCell = (props) => <SessionOptions props={props}/>;
...

SessionOptions.jsx:

...
export default  function SessionOptions({props}) {
...
  return <td className="k-command-cell">
  <div style={{marginTop:'2%'}}>
       <Button style={{width:'8vw',marginTop:'2%'}}
        onClick={()=>toggleDialogPrilog(props)}>
        Add
        </Button></>}
  </div>
  { visible2 && 
       <Dialog onClose={()=> toggleDialogPrilog()} title={"Add"} style={{width:'50%'}}>
    <Prilog snZagId={snZagId}/>
    </Dialog>
  }
  </td>;}

现在它只打开一个对话框。我清楚地看到的唯一区别是发送道具

//Before:
const CommandCell = (props) => <Options {...props}/>

//After:
const CommandCell = (props) => <SessionOptions props={props}/>;

第一个是属性展开符号，第二个是...？谁能解释一下区别。如果有人可以澄清更多。

如何正确处理 React 道具

How to handle React props correctly

javascript

kendo-grid

reactjs

react-props

react-hooks