Javascript 多次在循环中渲染对话框组件

我目前正在试验React和MaterialUI

我有一个组件，其中包括另一个组件。在

render（）

中，我正在一个伪数组上循环，该数组呈现

组件

  <ul>
     {tableContent.map((item, i) => 
       <li key={i}>{item.x}
          <FormDialog/>
      </li>
  )}
  </ul>

{tableContent.map（（项，i）=>
{item.x}

)}

当使用REACT-TOOLS检查DOM时，我当然可以看到对话框组件出现了3次

我现在在问自己，在现实世界中，当我渲染组件20-50次左右时，这是否是一种不好的做法，是否会导致严重的性能问题

如果这是一个问题

我真正喜欢的是对话框组件只是开箱即用，不需要打开或关闭任何其他组件“动作”。因此，我看不到保持对话框组件强大的自一致性功能的选项，而这个示例将是一个糟糕的实践，并给我带来巨大的性能问题

这是对话框组件，刚从Material UI演示中复制：

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default class FormDialog extends React.Component {
  state = {
    open: false,
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
          Open form dialog
        </Button>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="form-dialog-title"
        >
          <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
          <DialogContent>
            <DialogContentText>
              To subscribe to this website, please enter your email address here. We will send
              updates occasionally.
            </DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"
              label="Email Address"
              type="email"
              fullWidth
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleClose} color="primary">
              Subscribe
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
导出默认类FormDialog扩展React.Component{
状态={
开：错，
};
handleClickOpen=（）=>{
this.setState（{open:true}）；
};
handleClose=（）=>{
this.setState（{open:false}）；
};
render（）{
返回(
打开窗体对话框
订阅
若要订阅此网站，请在此处输入您的电子邮件地址。我们将发送
偶尔更新。
取消
订阅
);
}
}

那么我在问你什么

1） 我想知道我所描述的是否不好，是否应该在现实世界的例子中避免

---

2） 我需要哪些简单的选项来保持组件的自一致性功能，但使其正确。我确实希望避免在父组件中保持对话框组件的打开状态。

为什么需要多个对话框。在我看来，您应该有一个

组件和多个按钮来打开该对话框。你可以把一些道具传递给对话框，这样你就可以根据道具来改变对话框中的内容。实际上，我不需要几个不同的对话框，但我需要在每一行中都有一个

对话框。我知道我可以只渲染每一行中的按钮，但这会导致我跟踪父组件中的
对话框状态
，这我并不喜欢。每个对话框的状态将有多少数据，只是
打开
或更多的内容？不会有那么多数据。事实上，将有3-6个输入字段，使用户可以输入一些数据，然后将这些数据传递给父组件。在这种情况下，您可以将这些输入字段的值保存在对话框的状态中。我想它会在对话框关闭时丢失。如果您想避免这种情况，您应该使用redux来管理状态。