Question

我在ReactJs中创建动态数据表时遇到问题。在state.data中，我得到了我循环创建数据表的数据。

这是我的渲染功能：

＆＃13;

render: function() {
        return (
            <div>
                <table id="measurementsDataTable" className="row-border compact">
                    {
                        this.state.data.map(function(item) {
                            if( item.element == "th" ){
                                return (
                                    <thead>
                                        <tr>
                                            <ThElement width="280" data={item.description}/>
                                            <ThElement width="150" data={item.L1}/>
                                        </tr>
                                    </thead>
                                )
                            }
                            else if ( item.element == "tr" ) {
                                return (
                                    <tbody>
                                        <tr>
                                            <TdElement data={item.description}/>
                                            <TdElement data={item.L1}/>
                                        </tr>
                                    </tbody>
                                )
                            }
                        })
                    }

                </table>
            </div>
        );
    }

＆＃13;

问题是元素＆＃34; tbody＆＃34;这是给每一个＆＃34; tr＆＃34;行。它应该只是在第一个＆＃34; tr＆＃34;持续＆＃34; tr＆＃34;。

如果我能够返回＆＃34; tbody＆＃34;的开头，这将是一个问题，但是反应并不允许这样做。

有没有优雅的解决方案？

编辑：目前HTML看起来像这样。所有不同之处在于＆＃34; tbody＆＃34;元件。

<table>
<thead>
    <tr>
        <th>Phase</td>
        <th>L1</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage</td>
        <td>224.2</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Current</td>
        <td>0.00 mA</td>
    </tr>
</tbody>    
<thead>
    <tr>
        <th>Phase 2</td>
        <th>L2</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage2</td>
        <td>223.2</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Current2</td>
        <td>0.00 mA</td>
    </tr>
</tbody>

它应该是这样的：

<table>
<thead>
    <tr>
        <th>Phase</td>
        <th>L1</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage</td>
        <td>224.2</td>
    </tr>
    <tr>
        <td>Current</td>
        <td>0.00 mA</td>
    </tr>
</tbody>    
<thead>
    <tr>
        <th>Phase 2</td>
        <th>L2</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Voltage2</td>
        <td>223.2</td>
    </tr>
    <tr>
        <td>Current2</td>
        <td>0.00 mA</td>
    </tr>
</tbody>

Answer 1

您可以使用Array.prototype.reduce（）按标头对数据进行分组，然后创建适当的元素：

render: function() {

    var tableElements = this.state.data.reduce(function(grouped, item) {
        if (item.element == "th") {
            grouped.push({
                header: item,
                rows: []
            });
        } else {
            grouped[grouped.length - 1].rows.push(item);
        }
        return grouped;
    }, []).reduce(function(elements, item) {
        elements.push(<thead>
                          <tr>
                              <ThElement width="280" data={item.header.description}/>
                              <ThElement width="150" data={item.header.L1}/>
                          </tr>
                      </thead>);
        elements.push(<tbody>
                      {
                          item.rows.map(function(row) {
                              return (<tr>
                                          <TdElement data={row.description}/>
                                          <TdElement data={row.L1}/>
                                      </tr>);
                          });
                      }
                      </tbody>);
        return elements;

    }, []);

    return (
        <div>
            <table id="measurementsDataTable" className="row-border compact">
            { tableElements }
            </table>
        </div>
    );
}

Answer 2

Dynamic Data Table in ReactJs and edit field option




   class App extends React.Component {
 constructor(props){
      super(props);
 this.state = {
      data: [
      {'id':1,1:'',2:'Class1',3:'Class2',4:'Class3',5:'Class4',6:'Class5',7:'Class6'},
      {'id':2,1:'MONDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
      {'id':3,1:'TUESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
      {'id':4,1:'WEDNESDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
      {'id':5,1:'THURSDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'},
      {'id':6,1:'FRIDAY',2:'1',3:'2',4:'3',5:'4',6:'5',7:'6'}
 ],
 errorInput:''
 };
}

 render(){
      let tableStyle = {
           align:"center"
      };
      let list = this.state.data.map(p =>{
           return (
                <tr className="grey2" key={p.id}>
                     {Object.keys(p).filter(k => k !== 'id').map(k => {
                           return (<td className="grey1" key={p.id+''+k}><div suppressContentEditableWarning="true" contentEditable="true"
                          value={k} onInput={this.editColumn.bind(this,{p},{k})}>{p[k]}</div></td>);
                     })}
                </tr>
           );
      });
      return (
           <fieldset className="step-4">
                <div className="heading">
                     <h3>Tell us about your schedule</h3>
                     <p>Dynamic Data Table by Rohan Arihant </p>
                </div>
                <div className="schedule padd-lr">
                     <table cellSpacing="3" id="mytable" style={tableStyle}>
                          <tbody>{list}</tbody>
                     </table>

                </div>


           </fieldset>
      );
 }

} ReactDOM.render（＆lt; App /＆gt;，document.getElementById（'container'））;

codepen link

https://codepen.io/rohanarihant/pen/qmjKpj

在ReactJS

2 个答案: