如何根据单击的选项选择要显示的组件？

Question

我有一个React应用，它以网格布局显示小部件。用户可以选择添加/删除每个小部件。选择添加后，将打开一个模态，他们可以从名称列表中选择要显示的窗口小部件。我不确定如何在addEvent中实际添加它。目前，我已默认使用组件“ DataTable”之一。我是新来的反应者，所以任何帮助都会很棒。

这是我的应用程序：

import React, { Component } from 'react';
import Swappable from './components/SwappableComponent'
import './App.css';
import DataTable from './components/tableWidget';
import CheckboxList from './components/CheckboxList';
import AddWidgetDialog from './components/AddWidgetDialog';
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";



const styles = theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing.unit * 2,
    textAlign: "center",
    color: theme.palette.text.secondary
  }
});

class App extends Component {
    constructor(props) {
      super(props);
      this.state={
        widgets:[
          {id:1, name:"Order History", content: <DataTable/>},
          {id:2, name:"List",content: <CheckboxList/>},
          {id:3, content: ""},
          {id:4, content: ""}
        ],
        isModalOpen: false
      }

    }  
    deleteEvent=(index)=>{
        const copyWidgets=Object.assign([],this.state.widgets);
        let widget=this.state.widgets[index];
        widget.content="";
        copyWidgets[index]=widget;
        this.setState({
            widgets:copyWidgets
        })
    }
    addEvent=(index)=>{
        this.setState({isModalOpen: true})
        const copyWidgets=Object.assign([],this.state.widgets);
        let widget=this.state.widgets[index];
        widget.content=<DataTable/>; 
        copyWidgets[index]=widget;
        this.setState({
            widgets:copyWidgets
        })
    }
    onRequestClose = () => {
        this.setState({
          isModalOpen: false,
        });
      }
    render() {
      const { classes } = this.props;

      return (

      <div className={classes.root}>
      <AddWidgetDialog widgets={this.state.widgets} isModalOpen={this.state.isModalOpen} onRequestClose={this.onRequestClose} />
        <Grid container spacing={24}>
            {
                this.state.widgets.map((widget,index)=>{
                    return(
                        <Grid item xs={12} sm={6}>
                            <Paper className={classes.paper}><Swappable id={widget.id} content={widget.content} delete={this.deleteEvent.bind(this,index)} add={this.addEvent.bind(this,index)}/></Paper>
                         </Grid>
                    )
                })
            }
        </Grid>
      </div>
      );
    }
  }

  App.propTypes = {
    classes: PropTypes.object.isRequired
  };

  export default withStyles(styles)(App);

在我的app.js中，当前存在我的add方法，默认内容设置为“数据表”，但我希望它是模态中的选择。

addEvent=(index)=>{
        this.setState({isModalOpen: true})
        const copyWidgets=Object.assign([],this.state.widgets);
        let widget=this.state.widgets[index];
        widget.content=<DataTable/>; 
        copyWidgets[index]=widget;
        this.setState({
            widgets:copyWidgets
        })
    }

这是我的模态：

import React, { PropTypes } from 'react';
import Modal from 'react-modal';

const AddWidgetDialog = ({ widgets, isModalOpen, onRequestClose}) => {
  const widgetItems = Object.keys(widgets).map((widget, key) => {
    return (
      <div key={key} className="list-group">
      <a href="#" className="list-group-item">
          <h6 className="list-group-item-heading">{widgets[widget].name}</h6>
        </a>
      </div>
    );
  });
  return (
    <Modal
      className="Modal__Bootstrap modal-dialog"
      isOpen={isModalOpen}>
      <div className="modal-content">
       <div className="modal-header">
         <button type="button" className="close" onClick={onRequestClose}>
           <span aria-hidden="true">&times;</span>
           <span className="sr-only">Close</span>
         </button>
         <h4 className="modal-title">Add a widget</h4>
       </div>
       <div className="modal-body">
         <h5>Pick a widget to add</h5>
         {widgetItems}
       </div>
       <div className="modal-footer">
         <button type="button" className="btn btn-default" onClick={onRequestClose}>Close</button>
       </div>
      </div>
    </Modal>
  );
};


export default AddWidgetDialog;