Question

我在传递下面提到的函数时遇到了一些 undefined 错误。我应该如何将这个函数分两步传递给孩子？

我有这样的文件结构： Root.tsx > Integrations.tsx > GoogleFitIntegration.tsx

所以在 Root.tsx 中我传递了 handleGoogleFitPreferences 函数，如下所示：

    return (
      <Integrations
        handleGoogleFitPreferences={(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) => 
          this.handleGoogleFitPreferences(dailySteps,workouts,sleep,weight,bodyTemperature)}
        navigation={this.props.navigation}
      />
    );
  }

  private handleGoogleFitPreferences(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean): void {
    console.log(`daily-steps: ${dailySteps}`, `sleep: ${sleep}`, `workouts: ${workouts}`);
    
  }

然后在 Integrations.tsx 中我得到了函数。并将其传递给另一个孩子，如下所示：

readonly handleGoogleFitPreferences:(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) => void;

return <GoogleFitIntegration 
handleGoogleFitPreferences={(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) => props.handleGoogleFitPreferences(dailySteps,workouts,sleep,weight,bodyTemperature)} 
setIsGoogleFitOpen={handleBackPress} />;

在 GoogleFitIntegration.tsx 我得到了函数。并使用如下按钮运行它：

readonly handleGoogleFitPreferences:(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) => void;

//state
    const [dailySteps, setDailySteps] = React.useState<boolean>(true);
    const [workouts, setWorkouts] = React.useState<boolean>(false);
    const [sleep, setSleep] = React.useState<boolean>(true);
    const [weight, setWeight] = React.useState<boolean>(false);
    const [bodyTemperature, setBodyTemperature] =
      React.useState<boolean>(false);

        <CustomButton
          width="100%"
          height={40}
          label="Save"
          onPress={() =>  props.handleGoogleFitPreferences(dailySteps,workouts,sleep,weight,bodyTemperature)}
        />

打字稿：如何将函数传递给 React 组件？

0 个答案: