时间戳

首页 > 解决方案 > 如何对 React 组件值求和

javascript - 如何对 React 组件值求和

问题描述

我是一个初学者，正在编写一个 React 应用程序，目前三个组件减去根应用程序（是的，这是一个在线课程）。前两个无关紧要，但对于第三个，名为 Total，我需要返回定义为三个常量的练习计数的总和，练习 1~3。

我被教过如何对道具求和，但只是作为{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>
    )
}

标签： javascriptreactjs

解决方案

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

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

在渲染使用中

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

总而言之，使用减少https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

推荐阅读