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

你应该用你想要的渲染创建另一个组件，它看起来像这样（下一个代码可能不会编译它只是一个指南）

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>

反应动态渲染html

1 个答案: