javascript - 如何求和 React 组件值

Question

我是一名编写 React 应用程序的初学者，目前只有三个组件减去根应用程序(是的，这是一个在线类(class))。前两个并不重要，但对于名为 Total 的第三个，我需要返回定义为三个常量 exercises1~3 的练习计数的总和。

我被教过如何求和 props，但只是作为 {props + props1 + props2...}，我也能做到，但随着部分和练习数量的增加，效果会越来越差。我可以减少值或编写一个辅助函数，但 React 的工作方式有点不同，我有点不知道如何为此提供良好的可扩展解决方案。

//first two components hidden

const Total = (props) => {
    return (
        <>
            <p>help here!!</p>
        </>
    )
}

const App = () => {
    const course = "Half Stack app development"
    const part1 = "Fundamentals of React"
    const exercises1 = 10 //this one
    const part2 = "Using props to pass data"
    const exercises2 = 7 //this one
    const part3 = "State of a component"
    const exercises3 = 14 //and this one

    return (
        <div>
            <Header name={course} />
            <Content name={part1} exercises={exercises1} />
            <Content name={part2} exercises={exercises2} />
            <Content name={part3} exercises={exercises3} />

            <Total exercises= help here!! />
        </div>
    )
}

Answer 1

您应该将数据结构化为对象数组。

 const exercises = [{ name: 'Fundamentals of React', exercise: 10 }, etc];

在渲染中使用

exercises.map(ex => <Content name={ex.name} exercises={ex.exercise}/>)

求和使用reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce