试图以表格形式显示统计信息，不断出现“警告：validateDOMNesting（…）：”错误

Question

所以，我制作了这个应用程序来接收来自客户的反馈并将其处理为表格形式。它按照我的假设工作，但问题是控制台发回“警告：validateDOMNesting（...）：”错误，例如：

"Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>."

"Warning: validateDOMNesting(...): <button> cannot appear as a child of <tbody>."

"Warning: validateDOMNesting(...): <button> cannot appear as a child of <tbody>."

"Warning: validateDOMNesting(...): <button> cannot appear as a child of <tbody>."

我的代码如下：

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

/* Display & button */

const Display = props => <div><h1>Leave your feedback:</h1>{props.state}</div>

const Button = (props) => (
  <button onClick={props.handleClick}>
    {props.text}
  </button>
)

const Statistics = (good, neutral, bad, allClicks) => {

  return (
    <tbody>
      <tr text="Goodvotes" value ={good} />
      <tr text="Neutralvotes" value ={neutral} />
      <tr text="Badvotes" value ={bad} />
      <tr text="Allvotes" value ={allClicks} />
    </tbody>
  )
}

const App = () => {
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)
  const [value, setValue] = useState(0)
  const [allClicks, setAll] = useState(0)

  if (allClicks === 0) {
    return <div>
    <Display />
    <Button handleClick={() => {
      setGood(good + 1) 
      setValue(value + 1) 
      setAll(allClicks + 1)}} text="Good" />
    <Button handleClick={() => {
      setNeutral(neutral + 1) 
      setValue(value + 0) 
      setAll(allClicks + 1)}} text="Neutral" />
    <Button handleClick={() => {
      setBad(bad + 1)
      setValue(value - 1) 
      setAll(allClicks + 1)}} text="Bad" />

    <div><h1>Statistics:</h1></div>

    <div>Statistics are shown by placing a vote.</div>

  </div>
  }




  return (
    <table>
      <tbody>
      <Display />
      <Button handleClick={() => {
        setGood(good + 1) 
        setValue(value + 1) 
        setAll(allClicks + 1)}} text="Good" />
      <Button handleClick={() => {
        setNeutral(neutral + 1) 
        setValue(value + 0) 
        setAll(allClicks + 1)}} text="Neutral" />
      <Button handleClick={() => {
        setBad(bad + 1)
        setValue(value - 1) 
        setAll(allClicks + 1)}} text="Bad" />



      <h1>Statistics:</h1>



      <Statistics good={good} />
      <tr>Good feedback:<td>{good}</td></tr>
      <Statistics neutral={neutral} />
      <tr>Neutral feedback:<td>{neutral}</td></tr>
      <Statistics bad={bad} />
      <tr>Bad feedback:<td>{bad}</td></tr>
      <Statistics all={bad + good + neutral} />
      <tr>All feedback:<td>{bad + good + neutral}</td></tr>
      <Statistics average={value} />
      <tr>Average:<td>{value}</td></tr>
      <Statistics percentpositivetotal={good / allClicks * 100} />
      <tr>Percentage positive:<td>{good / allClicks * 100} %</td></tr>

      </tbody> </table>

  )


 }

ReactDOM.render(
  <App />, 
  document.getElementById('root')
)

我知道这与我对

的使用有关，但是我无法真正查明问题所在。有人可以指出我正确的方向吗？

干杯！

所以，我制作了这个应用程序来接收来自客户的反馈并将其处理为表格形式。它按照我的假设工作，但问题是控制台发送回“警告：validateDOMNesting（...）：”错误，例如：...

Answer 1

这里有一个标准的表结构，您会在输出中看到某种结果，浏览器向您显示警告，您可以阅读有关表元素here的更多信息；但让我总结一下为什么会发生这种情况；

表应由row和column组成。因此，您需要通过使用<tr>元素作为<tbody>的第一级子级来定义行和列，现在，对于列，您应该将<td>元素用作<tr>的第一级子级。在<td>中，您可以渲染自己的东西（尽管有一些限制）；总之，您拥有的所有内容都应在<td>标记内或标题的表标题内。