尝试在 React 组件中使用表格但遇到 div 问题

Question

我是 React 新手，所以正在阅读教程。我目前正在尝试完成一项基本练习，该练习要求我使用 HTML 表格来显示有关按钮按下的统计信息。

目前，我的统计组件没有向索引页渲染任何内容，而且，在尝试添加时，我遇到了作为 div 子级的问题。我尝试了很多组合，但还是没有弄清楚。

如有任何建议，我们将不胜感激。

import { useState } from 'react'

const Feedback = ( {goodClick, neutralClick, badClick}) => {
    return(
        <div>
            <h1>Feedback</h1>
            <Button handler={goodClick} text={"good"}></Button>
            <Button handler={neutralClick} text={"neutral"}></Button>
            <Button handler={badClick} text={"bad"}></Button>
        </div>
    )
}

const Button = ({ handler, text }) => {
    return (
        <button onClick={() => handler(1)}>{text}</button>
    )
}
const Statistics = ({ goodValue, neutralValue, badValue, total, averageValue }) => {
    if (total.length === 0){
        return(<div>Please give feedback using buttons above</div>)
    }
    return (
        <div>
            <StatisticLine statType={goodValue} text={"good"}></StatisticLine>
            <StatisticLine statType={neutralValue} text={"neutral"}></StatisticLine>
            <StatisticLine statType={badValue} text={"bad"}></StatisticLine>
            <StatisticLine statType={total} text={"total"}></StatisticLine>
            <StatisticLine statType={averageValue} text={"average"}></StatisticLine>
        </div>
    )
}

const StatisticLine = ({ type, value }) => {
    return (
        <tbody>
            <tr>
                <td>{value}</td>
                <td>{type}</td>
            </tr>
        </tbody>
    )
}

const App = () => {
    // save clicks of each button to its own state
    const [good, setGood] = useState(0)
    const [neutral, setNeutral] = useState(0)
    const [bad, setBad] = useState(0)

    const incGood = (newValue) => setGood(good+newValue)
    const incNeutral = (newValue) => setNeutral(neutral+newValue)
    const incBad = (newValue) => setBad(bad+newValue)

    return (
        <div>
            <Feedback
                goodClick={incGood}
                neutralClick={incNeutral}
                badClick={incBad}>
            </Feedback>

            <Statistics
                goodValue = {good}
                neutralValue = {neutral}
                badValue={bad}
                total = {good + neutral + bad}
                averageValue ={good + neutral + bad/3}
            >
            </Statistics>
        </div>
    )
}

export default App

Answer 1

问题出现在

StatisticLine

组件中。

const StatisticLine = ({ type, value }) => {
    return (
        <tbody>
            <tr>
                <td>{value}</td>
                <td>{type}</td>
            </tr>
        </tbody>
    )
}

您正在尝试从组件 props 中解构

type

和

value

，但传入的 props 与这些属性名称不匹配。

例如：

<StatisticLine statType={goodValue} text={"good"}></StatisticLine>

在这里您传递两个属性，

statType

和

text

。在

StatisticLine

组件中解构这些属性名称时需要完全匹配。

要解决渲染问题，请将

StatisticLine

组件替换为：

const StatisticLine = ({ statType, text }) => {
  return (
    <tbody>
      <tr>
        <td>{statType}</td>
        <td>{text}</td>
      </tr>
    </tbody>
  );
};

Answer 2

const StatisticLine = ({ 类型, 值 }) => { 返回 （ {价值} {类型} ） }