如何将道具传递给React中的非呈现函数？

Question

我有一个非常简单的应用程序做出反应，显示总天数的多少，这些被漏诊：

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组件是“正义”功能，而道具仅仅是该功能的参数名称。

Answer 2

你忘了在你的组件中传递“道具”。 它必须是：

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