Javascript 可以在React钩子中调用函数

我有一个基于钩子的组件，如下所示

import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated
} from 'react-native';
import CAStyles from '../res/CAStyles';

const CACard = (props ) => (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
);



export default CACard

import React，{useffect，useState}来自“React”；
进口{
样式表，
文本，
看法
可触摸不透明度，
有生气的
}从“反应本机”；
从“../res/CAStyles”导入CAStyles；
const CACard=（道具）=>(
{props.title}
);
导出默认卡卡

我希望钩子中有自己的状态值和函数。但它抛出了语法错误。我知道使用基于类的组件是可能的，但不确定为什么使用钩子是不可能的

---

我后来试图找到解决办法的努力是徒劳的。有人能帮帮我吗。提前感谢。

感谢@JMadelaine指出这一点。我改变如下，这一切都很好

const CACard = (props ) => {

  return (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
  )
    
};

const CACard=（道具）=>{
返回(
{props.title}
)
};
感谢@JMadelaine指出这一点。我改变如下，这一切都很好

const CACard = (props ) => {

  return (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
  )
    
};

const CACard=（道具）=>{
返回(
{props.title}
)
};
正如JMadelaine正确指出的那样。您需要在功能组件定义中编写useState。按如下方式重新构造代码：

import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated
} from 'react-native';
import CAStyles from '../res/CAStyles';

const CACard = (props) =>{
    const [aStateVar, setAStateVar] = useState(false);

    return (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
    );

};

export default CACard;

import React，{useffect，useState}来自“React”；
进口{
样式表，
文本，
看法
可触摸不透明度，
有生气的
}从“反应本机”；
从“../res/CAStyles”导入CAStyles；
const CACard=（道具）=>{
常量[aStateVar，setAStateVar]=useState（false）；
返回(
{props.title}
);
};
导出默认卡卡；
正如JMadelaine正确指出的那样。您需要在功能组件定义中编写useState。按如下方式重新构造代码：

import React, { useEffect, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated
} from 'react-native';
import CAStyles from '../res/CAStyles';

const CACard = (props) =>{
    const [aStateVar, setAStateVar] = useState(false);

    return (
    <TouchableOpacity onPress={props.cardTouched}>
        <View style={[styles.cardContainer, CAStyles.ALIGN_CENTER]} width={props.width} height={props.height}>
          <Text style={styles.textStyle}>{props.title}</Text>
        </View>
    </TouchableOpacity>
    );

};

export default CACard;

import React，{useffect，useState}来自“React”；
进口{
样式表，
文本，
看法
可触摸不透明度，
有生气的
}从“反应本机”；
从“../res/CAStyles”导入CAStyles；
const CACard=（道具）=>{
常量[aStateVar，setAStateVar]=useState（false）；
返回(
{props.title}
);
};
导出默认卡卡；
这个组件不是基于钩子的，它只是一个返回JSX的功能组件。我想你误解了什么是钩子。组件不是挂钩，组件可以使用挂钩。要使用钩子，需要将return语句从函数体中分离出来。然后可以在函数体中使用钩子。这个组件不是基于钩子的，它只是一个返回JSX的函数组件。我想你误解了什么是钩子。组件不是挂钩，组件可以使用挂钩。要使用钩子，需要将return语句从函数体中分离出来。然后可以在函数体内部使用钩子。