React动态渲染html

Question

我在这里有这个代码：

render() {
return (
  <div>
    {this.renderModal(this.state.isOpen)}
    <ReactGridLayout
      className="layout"
      layout={layout}
      draggableCancel="input,button"
      cols={12}
      rowHeight={30}
      width={1200}
    >
      <div style={gridItem} key={"0"}>
        <button onClick={this.toggleModal} id="0">
          Open the modal
        </button>
      </div>

      <div style={gridItem} key={"1"}>
        <button onClick={this.toggleModal} id="2">
          Open the modal
        </button>
      </div>

      <div style={gridItem} key={"3"}>
        <button onClick={this.toggleModal} id="3">
          Open the modal
        </button>
      </div>

    </ReactGridLayout>
  </div>
);

如您所见，此代码重复了三次。

<div style={gridItem} key={"0"}>
        <button onClick={this.toggleModal} id="0">
          Open the modal
        </button>
      </div>

有没有什么办法可以让我动态地做呢？我希望能够接受一个整数变量，然后呈现与该变量一样多的整数变量。希望我问的是对的，我是个新手。

下面是toggleModal，以防万一：

toggleModal = e => {
this.setState({
  isOpen: e.target.id
});

Answer 1

你应该用你想要的render创建另一个组件，它看起来像这样(下一段代码可能没有编译它只是一个指南)

class toggle extends Component {
render() {
    return (
        <div style={this.props.gridItem}>
            <button onClick={this.toggleModal} id={this.props.id}>
                Open the modal
            </button>
        </div>
);
}

在render(){ end return之间，您应该放入以下内容：

render() {    
 var rows = [];
   if(this.props.items){
     var num = this.props.items.length;
       for(var i = 0; i < num; i++){
         rows.push(<toggle key={GetID()} gridItem={this.props.items[num]} id={i} />);
       }
   }
return (
...

以及您实际编写每个div的位置

<ReactGridLayout className=... @@stuff you have@@ ... >
    {rows}
</ReactGridLayout>