可以在React挂钩中调用函数

时间:2020-07-11 07:56:08

标签: javascript reactjs react-native react-hooks

我有一个类似下面基于Hooks的组件

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

我想在钩子内部拥有自己的状态值和函数。但这会引发语法错误。我知道基于类的组件是可能的,但不确定为什么钩子无法实现。

我随后的寻找解决方案的尝试是徒劳的。有人可以在这里帮我吗。预先感谢。

2 个答案:

答案 0 :(得分:1)

感谢@JMadelaine指出来。我做了如下更改,一切正常。

>>> tf.models
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
AttributeError: module 'tensorflow' has no attribute 'models'

答案 1 :(得分:1)

正如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;