如何对 React 组件值求和

Question

我是一个初学者，正在编写一个 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>
    )
}

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

Answer 2

这是我的解决方案，假设您控制 App 组件中的数据结构

const Total = (props) => {
    return (
        <>
            <p>props.totalExerciseCount</p>
        </>
    )
}

const App = () => {
    const course: {
      name: "Half Stack app development",
      parts: [
        {
          title: "Fundamentals of React"
          exerciseCount: 10
        },
        {
          title: "Using props to pass data"
          exerciseCount: 7
        },
        {
          title: "State of a component"
          exerciseCount: 14
        },
      ]
    }

  let totalExerciseCount = 0;

    return (
        <div>
            <Header name={course.name} />
            {course.parts.map(part => {
                totalExerciseCount += part.exerciseCount;
                return <Content name={part.title} exercises={part.exerciseCount} />
              })
            }

            <Total exercises={totalExerciseCount} />
        </div>
    )
}

Answer 3

您可以创建一个Total 组件作为包装器并计算孩子的道具：

const Total = (props) => {
    const { children } = props;
    const total = children.reduce((total, { props }) => total += props.exercises, 0);

    return (
        <>
            {children}
            <p>{total}</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} />
            <Total>
              <Content name={part1} exercises={exercises1} />
              <Content name={part2} exercises={exercises2} />
              <Content name={part3} exercises={exercises3} />
            </Total>
        </div>
    )
}
export default App;

Answer 4

const Total = (props) => {
    return (<p>{props.exercises}</p>)
}

然后

<Total exercises={exercises1 + exercises2 + exercises3} />