Question

我正在尝试创建一个包含多行和固定列的表。现在我添加了两行固定的5列。下面是代码。

import React from 'react'

class Table extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            columns: [    
                {
                    person1: "Shubham",
                    person2: "Nikhil",
                    person3: "Rishabh",
                    person4: "Piyush",
                    last: <button>Delete</button>
                },
                {
                    person1: "Manish",
                    person2: "Nikhil",
                    person3: "Harsh",
                    person4: "Shashank",
                    last: <button>Delete</button>   
                }
            ]
        }
    }

    render(){
        return(
            <div className = "table">
                {
                    this.state.columns.map((obj) => {
                        return Object.values(obj).map(
                            (value) => {
                                return value +" "
                            }
                        ) + "\n\n"
                     })
                 }
            </div>
        )
    }
}

export default Table

我的预期输出是：

Shubham Nikhil Rishabh Piyush（删除按钮）

Manish Nikhil Harsh Shashank（删除按钮）

但我得到了：

Shubham，Nikhil，Rishabh，Piyush，[对象] Manish，Nikhil ，苛刻，Shashank，[对象]

为什么＆＃34; \ n＆＃34;不在这里工作。另请注意，如果我删除所有空格，则会显示返回语句按钮，我无法理解为什么会发生这种情况。

Answer 1

下面的代码怎么样？我从你的对象中删除了删除键（因为它是重复的代码），并且稍微简化了渲染逻辑。当用户单击每行中的delete按钮时，我还添加了删除行的功能：

import React, { Component } from 'react';

class Table extends Component {
  constructor(props) {
    super(props)
    this.deleteRow = this.deleteRow.bind(this)
    this.state = {
      columns: [
        {
          person1: 'Shubham',
          person2: 'Nikhil',
          person3: 'Rishabh',
          person4: 'Piyush',
        },
        {
          person1: 'Manish',
          person2: 'Nikhil',
          person3: 'Harsh',
          person4: 'Shashank',
        }
      ]
    }
  }

  deleteRow(idx) {
    this.setState({
      columns: this.state.columns.filter((col, colIdx) => colIdx !== idx)
    })
  }

  render() {
    return(
      <div className='table'>
        {this.state.columns.map((obj, idx) => (
          <Row key={idx}
            idx={idx}
            data={obj}
            deleteRow={this.deleteRow} />
        ))}
      </div>
    )
  }
}

const Row = props => {
  return (
    <div>
      {getNames(props.data)}
      <button onClick={props.deleteRow.bind(null, props.idx)}>
        Delete
      </button>
    </div>
  )
}

const getNames = obj => {
  let string = '';
  Object.keys(obj).map((key) => string += obj[key] + ' ')
  return string;
}

export default Table;

这呈现：

附录：为什么你的代码无效？

您的主渲染逻辑围绕以下循环：

{
  this.state.columns.map((obj) => {
      return Object.values(obj).map(
          (value) => {
              return value +" "
          }
      ) + "\n\n"
   })
}

这可以更紧凑地重写为：

{this.state.columns.map((obj) => (
  Object.values(obj).map((value) => value +" ") + "\n\n"
))}

在这里检查this.state.columns中的每个对象，并为每个对象添加对象的值到字符串，然后在添加对象的最后一个值后添加\n\n

这种方法存在两个问题。第一个问题是虽然\n\n在其他编程范例中创建了破坏空白（例如，当构建要在.txt文件中显示的字符串时），\n不会在HTML中创建破坏的空格。可以使用<br/>元素或通过提供元素display: block或以其他方式创建HTML中的空格，但不能使用\n创建。

第二个问题是this.state.columns中每个对象的最后一个值是一个HTML元素，需要处理的方式与其他值中的原始字符串内容不同。正如@Ankari所示，您可以通过为每个值调用{val}来显示这些按钮元素，这样可以防止您在每个行末尾看到的[Object,Object]问题。

我希望这有帮助！

Answer 2

您可以让真正的HTML表格为您完成工作。您可以将数据保持在状态并根据需要添加更多数据，也可以根据需要使用自定义按钮。您可以根据需要设置表格的样式，然后使用css进行查看。

＆＃13;

class Table extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            columns: [    
                {
                    person1: "Shubham",
                    person2: "Nikhil",
                    person3: "Rishabh",
                    person4: "Piyush",
                    last: <button>Delete</button>
                },
                {
                    person1: "Manish",
                    person2: "Nikhil",
                    person3: "Harsh",
                    person4: "Shashank",
                    last: <button>Delete</button>   
                }
            ]
        }
    }

    render(){
        return(
          <table>
            <tbody>
              {this.state.columns.map((column, idx) => (
                <tr key={idx}>
                    {Object.values(column).map((val, idx2) => (
                      <td key={`${idx}-${idx2}`}>{val}</td>
                    ))}
                  </tr>
              ))}
            </tbody>
          </table>
        )
    }
}

ReactDOM.render(
  <Table/>,
  document.getElementById('container')
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

＆＃13;

无法使用反应代码分隔表的行

2 个答案:

附录：为什么你的代码无效？