呈现表中封装的组件时出现问题

Question

有人能帮我学习react课程吗？在这个练习中，我需要将组件封装在表中，但我遇到了错误。我尝试将表封装在不同的东西中，但它不起作用，但除非我解决错误，否则任务不会让我继续：该应用程序运行良好，但在控制台日志中出现了一个完全混乱的情况。有人能帮上忙吗？并解释原因？

react_devtools_backend.js:4045 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.
at div
at StatisticsLine (http://localhost:3000/static/js/bundle.js:29:24)
at tr
at div
at tbody
at table
at div
at Statistics (http://localhost:3000/static/js/bundle.js:45:13)
at div
at App (http://localhost:3000/static/js/bundle.js:174:74)
overrideMethod @ react_devtools_backend.js:4045
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
validateDOMNesting @ react-dom.development.js:10081
createInstance @ react-dom.development.js:10181
completeWork @ react-dom.development.js:19464
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react_devtools_backend.js:4045 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
at tr
at div
at tbody
at table
at div
at Statistics (http://localhost:3000/static/js/bundle.js:45:13)
at div
at App (http://localhost:3000/static/js/bundle.js:174:74)
overrideMethod @ react_devtools_backend.js:4045
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
validateDOMNesting @ react-dom.development.js:10081
createInstance @ react-dom.development.js:10181
completeWork @ react-dom.development.js:19464
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
react_devtools_backend.js:4045 Warning: validateDOMNesting(...): <p> cannot appear as a child of <tr>.
at p
at tr
at div
at tbody
at table
at div
at Statistics (http://localhost:3000/static/js/bundle.js:45:13)
at div
at App (http://localhost:3000/static/js/bundle.js:174:74)

jsx代码：

import React, { useState } from 'react'
const StatisticsLine = (props) => {
return (
<div>
<p>{props.text}{props.value}</p>
</div>
)
}
const Statistics = (props) =>{
if(props.allClicks.length === 0){
return (
<div>
<h1>There is no feedback</h1>
</div>
)
}
return (
<div>


<h1>statistics</h1>
<table>
<tbody>
<div>
<tr><StatisticsLine text="good " value={props.good}/></tr>
<tr><StatisticsLine text="neutral " value={props.neutral}/></tr>
<tr><StatisticsLine text="bad " value={props.bad}/></tr>
<tr><p>all {props.good+ props.neutral  + props.bad}</p></tr>
<tr><p>average {(props.good+ props.neutral  + props.bad)/3}</p></tr>
<tr><p>positive :{(props.good+ props.neutral  + props.bad)*props.good/100}%</p></tr>
</div>
</tbody>
</table>


</div>
)
}
const App = () => {
const [good, setGood] = useState(0)
const [neutral, setNeutral] = useState(0)
const [bad, setBad] = useState(0)
const [allClicks, setAll] = useState([])
const handleGood = () => {
setAll(allClicks.concat(" "))
setGood(good + 1)
}
const handleNeutral = () =>{
setAll(allClicks.concat(" "))
setNeutral(neutral + 1)
}
const handleBad = () =>{
setAll(allClicks.concat(" "))
setBad(bad+1)
}
return (
<div>
<h1>give feedback</h1>
<button onClick={()=>handleGood()}>good</button>
<button onClick={() =>handleNeutral()}>neutral</button>
<button onClick={() =>handleBad()}>bad</button>
<Statistics  good={good} neutral={neutral} bad={bad} allClicks={allClicks} />
</div>
)
}
export default App

Answer 1

import React, { useState } from "react";
const StatisticsLine = (props) => {
return (
<td>
{props.text}
{props.value}
</td>
);
};
const Statistics = (props) => {
if (props.allClicks.length === 0) {
return (
<div>
<h1>There is no feedback</h1>
</div>
);
}
return (
<div>
<h1>statistics</h1>
<table>
<tbody>
<tr>
<StatisticsLine text="good " value={props.good} />
</tr>
<tr>
<StatisticsLine text="neutral " value={props.neutral} />
</tr>
<tr>
<StatisticsLine text="bad " value={props.bad} />
</tr>
<tr>
<td>all {props.good + props.neutral + props.bad}</td>
</tr>
<tr>
<td>average {(props.good + props.neutral + props.bad) / 3}</td>
</tr>
<tr>
<td>
positive :
{((props.good + props.neutral + props.bad) * props.good) / 100}%
</td>
</tr>
</tbody>
</table>
</div>
);
};
const App = () => {
const [good, setGood] = useState(0);
const [neutral, setNeutral] = useState(0);
const [bad, setBad] = useState(0);
const [allClicks, setAll] = useState([]);
const handleGood = () => {
setAll(allClicks.concat(" "));
setGood(good + 1);
};
const handleNeutral = () => {
setAll(allClicks.concat(" "));
setNeutral(neutral + 1);
};
const handleBad = () => {
setAll(allClicks.concat(" "));
setBad(bad + 1);
};
return (
<div>
<h1>give feedback</h1>
<button onClick={() => handleGood()}>good</button>
<button onClick={() => handleNeutral()}>neutral</button>
<button onClick={() => handleBad()}>bad</button>
<Statistics
good={good}
neutral={neutral}
bad={bad}
allClicks={allClicks}
/>
</div>
);
};
export default App;