Question

我试图将表格行分成两行。所以，我在render（）方法中写了两个tr标签。能够分割行但是它的对齐方式不正确。

所有字段都在第一列中呈现。我怎样才能正确分割桌子。

使用Reactjs V 15.6.1

class Details extends React.Component {
    constructor(props) {
    super(props);   
    this.state = { item: props.item };
    }

            render() {

            return (
            <table className="table table-bordered" style={{fontsize: '8'}}>
                <thead>
                    <tr>
                        <th>Line Number</th>
                        <th>Product Code</th>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Unit Price</th>
                    </tr>
                </thead>
                <DetailsList items={ this.state.item.order_items }  />
            </table>
        );   
    }
}

class DetailsList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { };
    }
 render() {
       return (<tbody>{ this.props.items.map((item) => <DetailsItem key={ 
 item.line_id } item={ item } />) }
                  </tbody>);    
        }
}

class DetailsItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = { item: props.item };
    }


    render() {
        return (<tbody>
            <tr>
                <td><input name="line_number" type="text"  
                     value={ this.state.item.line_number }  /> </td>
                <td><input name="product_code" type="text"
                     value={ this.state.item.product_code }  /></td>
                <td><input name="product_description" type="text"
                     value={ this.state.item.product_description } /> </td>
            </tr>
            <tr>
                <td>{ this.state.item.product_quantity } </td>
                <td>{ this.state.item.unit_net_price } </td>
            </tr>
            </tbody>
        );
    }
}

请在下面找到我的输出截图。所有字段都在同一列中呈现。它正在添加第二个表行标记时发生。

另外，如果从<tbody>方法移除return()标记，也会抛出错误Adjacent JSX elements must be wrapped in an enclosing tag。

Answer 1

ReactJS V 15.x.x只允许render（）方法中的一个组件。无法返回多个<tr>标记。这已经从ReactJS 16+ https://reactjs.org/docs/jsx-in-depth.html得到解决。

Reactjs - 将表行拆分为两行 - 字段未正确对齐

1 个答案: