如何將道具傳遞給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} />