Question

我有一个非常简单的React应用程序，显示总天数以及错过了多少这些：

export const DayCount = (props) => (
  <div>
    <h4>Total days: { props.total }</h4>
    <h4>Missed days: { props.missed } </h4>
  </div>
);

export default class App extends React.Component {
  render() {
    return (
      <DayCount total={10} missed={1} />
    )
  }
}

我想制作一个计算器，显示参加的天数百分比。然而，似乎道具不能以相同的方式传递给我的PercentageFunc函数？

export const PercentageFunc = (props) => {
  return (props.total - props.missed) / props.total;
};


export const DayCount = (props) => (
  <div>
    <h4>Total days: { props.total }</h4>
    <h4>Missed days: { props.missed } </h4>
    <h1>% attended: { PercentageFunc() }</h1>
  </div>
);

export default class App extends React.Component {
  render() {
    return (
      <DayCount total={10} missed={1} />
    )
  }
}

Answer 1

您似乎在调用PercentageFunc，但未在此处传递道具数据

<h1>% attended: { PercentageFunc() }</h1>

虽然该函数期望数据，但根据您定义的方法签名：

export const PercentageFunc = (props) => {
  return (props.total - props.missed) / props.total;
};

调用props时，您需要将PercentageFunc传递给PercentageFunc(props)

重要的是要记住，React组件是“只是”函数，而props“只是”该函数的参数名称。

Answer 2

你忘了通过＆＃34;道具＆＃34;在您的组件中。必须是：

<PercentageFunc total={props.total} missed={props.missed} />

如何在React中将道具传递给非渲染函数？

2 个答案: