Question

我想使用 Balance.J 中 IncomeExpense.js 文件中的 getIncome（）和 getExpense（） s文件。我也有Context API，但我想我不能用它来使用另一个组件的子功能。

IncomeExpense.js

function IncomeExpense() {
    const classes = useStyles();

    let {transactions} = useContext(TransactionContext);

    function FormRow() {

        function getIncome() {
            let income = 0;
            for (var i = 0; i < transactions.length; i++)
            {
                if (transactions[i].amount > 0)
                {
                    income += transactions[i].amount;
                }

            }
            return income;
        };

        const getExpense = () => {
            let expense = 0;
            for (var i = 0; i < transactions.length; i++)
            {
                if (transactions[i].amount < 0)
                {
                    expense -= transactions[i].amount;
                }
            }
            return expense;
        };
        // console.log(getExpense())

        return (
                            <Typography className={classes.weight} align="center" variant="h5" component="h2">
                                INCOME
                            </Typography>
                            <Typography className={classes.colorGreen + ' ' + classes.weight} align="center" variant="body2" component="p">

                                +${getIncome()}
                            </Typography>

                     <Typography className={classes.weight} align="center" variant="h5" component="h2">
                         EXPENSE
                      </Typography>
                     <Typography className={classes.colorRed + ' ' + classes.weight} align="center" variant="body2" component="p">

                         -${getExpense()}
                     </Typography>
        );
    }

    return (
        <div className={classes.root}>
                    <FormRow />
        </div>
    );
}

export default IncomeExpense;

Balance.js

import React, {useContext} from "react";
import IncomeExpense from "../IncomeExpense/IncomeExpense";

const Balance = () => {
    return (
        <div>
            <h2>YOUR BALANCE <br/> ${ getIncome() } </h2>
        </div>
    );
}

export default Balance;

请让我知道您是否需要更多代码来检查问题。谢谢

Answer 1

似乎两个函数都非常简单，每个函数只有一个变量：transactions。虽然一些评论者建议将它们放在IncomeExpense和Balance的下一个共同祖先中，但另一个选择是将它们与组件完全分离。将它们作为常量保存在某个actions文件中，然后将其导入并以transactions作为参数使用（类似于Ghassen Louhaichi的评论）。如果您要合并redux，这也是一个好习惯。

// actions.js

export const getIncome = transactions => {

  let income = 0;
  for (var i = 0; i < transactions.length; i++) {
    if (transactions[i].amount > 0) {
      income += transactions[i].amount;
    }
  }
  return income;

};

export const getExpense = transactions => {

  let expense = 0;
  for (var i = 0; i < transactions.length; i++) {
    if (transactions[i].amount < 0) {
      expense -= transactions[i].amount;
    }
  }
  return expense;

};

我还建议您将FormRow用作其自己的组件。在IncomeExpense组件中定义整个对象有点奇怪。现在您可以在其他地方使用它。

// FormRow.js

import { getIncome, getExpense } from './actions.js'

const classes = useStyles()
let {transactions} = useContext(TransactionContext);


const FormRow = () = {

  return (
      <Typography ... >
        INCOME
      </Typography>
      <Typography ... >
        +${getIncome(transactions)}
      </Typography>

      <Typography ... >
        EXPENSE
      </Typography>
      <Typography ... >
        -${getExpense(transactions)}
      </Typography>
    )

}

如果所有IncomeExpense都返回了FormRow，也许它们不需要是单独的组件？

// IncomeExpense.js
// Does this need to be a separate component than FormRow?

import FormRow from './FormRow'

const classes = useStyles()

function IncomeExpense() {

  return (
    <div className={classes.root}>
      <FormRow />
    </div>
  )
}

export default IncomeExpense;

// Balance.js

import React, {useContext, useContext} from "react";
import IncomeExpense from "../IncomeExpense/IncomeExpense";
import { getIncome, getExpense } from './actions.js'

let {transactions} = useContext(TransactionContext);

const Balance = () => {
    return (
        <div>
            <h2>YOUR BALANCE <br/> ${ getIncome(transactions) } </h2>
        </div>
    );
}

export default Balance;

从另一个组件反应Js调用函数

1 个答案: