Fatal编程技术网
  • react-native/
  • React native 导出默认类App扩展React.Component中的挂钩

React native 导出默认类App扩展React.Component中的挂钩

react-native

React native 导出默认类App扩展React.Component中的挂钩,react-native,react-hooks,React Native,React Hooks,我正在尝试构建一个React原生应用程序，并重新使用其中的一些原则，但我正在努力解决这个问题： const { scrollEnabled, setScrollEnabled } = useState(false); 放置在： export default class App extends React.Component { 我最初把它放在export default（）=>{中，但由于其他原因，我不得不更改它 根据放置位置的不同，我会得到意外标记或无效的钩子调用。钩子只能在函数组件主

我正在尝试构建一个React原生应用程序，并重新使用其中的一些原则，但我正在努力解决这个问题：

  const { scrollEnabled, setScrollEnabled } = useState(false);
放置在：

export default class App extends React.Component {
我最初把它放在
export default（）=>{
中，但由于其他原因，我不得不更改它

根据放置位置的不同，我会得到
意外标记
或
无效的钩子调用。钩子只能在函数组件主体内部调用。发生这种情况的原因可能是：1.React和呈现程序的版本不匹配（例如React DOM）2.您可能违反了钩子的规则3.同一个应用程序中可能有多个React副本。有关如何调试和修复此问题的提示，请参阅。

我试过移动它并进行重构，但没有成功。你能找出哪里出了问题或者应该放在哪里吗

我将尝试在下面给出我的代码的框架：

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

const { scrollEnabled, setScrollEnabled } = useState(false); // Issue with this line. Tried to move it in different places

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}

import React，{useState，useContext}来自“React”；
从“react native”导入{View，StyleSheet，StatusBar，Dimensions，Text，ScrollView，TouchableOpacity}；
const screen=Dimensions.get（“窗口”）；
常量formatNumber=（number）=>`0${number}`.slice（-2）；
const getappeased=（时间）=>{
返回{
小时数：小时数
};
};
const{scrollEnabled，setScrollEnabled}=useState（false）；//此行有问题。试图将其移到其他位置
导出默认类App扩展React.Component{
间隔=空；
建造师（道具）{
超级（道具）；
此.state={
elapsedMilliseconds:0
};
}
停止=（）=>{
clearInterval（这个.interval）；
this.interval=null；
这是我的国家({
isRunning:false，
});
};
render（）{
常量{小时、分钟、秒、毫秒}=GetExpressed(
this.state.elapsedmillistes
);
返回(
//东西
);
}
}
不能在类组件内使用React钩子

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
      scrollEnabled: false // add scroll enable to state
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
      scrollEnabled: true, // example of setting scrollEnabled to true
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}

您应该使用<代码> SETSTATE < /COD>，或者考虑将组件转换为“功能”组件。

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
      scrollEnabled: false // add scroll enable to state
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
      scrollEnabled: true, // example of setting scrollEnabled to true
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}

import React，{useState，useContext}来自“React”；
从“react native”导入{View，StyleSheet，StatusBar，Dimensions，Text，ScrollView，TouchableOpacity}；
const screen=Dimensions.get（“窗口”）；
常量formatNumber=（number）=>`0${number}`.slice（-2）；
const getappeased=（时间）=>{
返回{
小时数：小时数
};
};
导出默认类App扩展React.Component{
间隔=空；
建造师（道具）{
超级（道具）；
此.state={
elapsedMilliseconds:0
scrollEnabled:false//将滚动启用添加到状态
};
}
停止=（）=>{
clearInterval（这个.interval）；
this.interval=null；
这是我的国家({
isRunning:false，
scrollEnabled:true，//将scrollEnabled设置为true的示例
});
};
render（）{
常量{小时、分钟、秒、毫秒}=GetExpressed(
this.state.elapsedmillistes
);
返回(
//东西
);
}
}
不能在类组件内使用React钩子

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
      scrollEnabled: false // add scroll enable to state
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
      scrollEnabled: true, // example of setting scrollEnabled to true
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}

您应该使用<代码> SETSTATE < /COD>，或者考虑将组件转换为“功能”组件。

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
      scrollEnabled: false // add scroll enable to state
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
      scrollEnabled: true, // example of setting scrollEnabled to true
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}

import React，{useState，useContext}来自“React”；
从“react native”导入{View，StyleSheet，StatusBar，Dimensions，Text，ScrollView，TouchableOpacity}；
const screen=Dimensions.get（“窗口”）；
常量formatNumber=（number）=>`0${number}`.slice（-2）；
const getappeased=（时间）=>{
返回{
小时数：小时数
};
};
导出默认类App扩展React.Component{
间隔=空；
建造师（道具）{
超级（道具）；
此.state={
elapsedMilliseconds:0
scrollEnabled:false//将滚动启用添加到状态
};
}
停止=（）=>{
clearInterval（这个.interval）；
this.interval=null；
这是我的国家({
isRunning:false，
scrollEnabled:true，//将scrollEnabled设置为true的示例
});
};
render（）{
常量{小时、分钟、秒、毫秒}=GetExpressed(
this.state.elapsedmillistes
);
返回(
//东西
);
}
}
首先，只能在功能组件内部使用hook，不能在类内组件或外部组件中使用

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
      scrollEnabled: false // add scroll enable to state
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
      scrollEnabled: true, // example of setting scrollEnabled to true
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}
如果您使用的是类组件，只需使用
state
和
setState
而不是hook

比如：

导出默认类App扩展React.Component{
建造师（道具）{
此.state={
scrollEnabled:true
}
}
停止=（）=>{
this.setState（{scrollEnabled:false}）
}
render（）{
返回(
//东西
)
}
}
首先，只能在功能组件内部使用hook，不能在类内组件或外部组件中使用

import React, { useState, useContext } from "react";
import {  View,  StyleSheet,  StatusBar,  Dimensions,  Text,  ScrollView,  TouchableOpacity} from "react-native";

const screen = Dimensions.get("window");

const formatNumber = (number) => `0${number}`.slice(-2);

const getElapsed = (time) => {
  return {
    hours: formatNumber(hours)
  };
};

export default class App extends React.Component {
  interval = null;

  constructor(props) {
    super(props);

    this.state = {
      elapsedMilliseconds: 0
      scrollEnabled: false // add scroll enable to state
    };
  }

  stop = () => {
    clearInterval(this.interval);
    this.interval = null;
    this.setState({
      isRunning: false,
      scrollEnabled: true, // example of setting scrollEnabled to true
    });
  };

  render() {
    const { hours, minutes, seconds, milliseconds } = getElapsed(
      this.state.elapsedMilliseconds
    );

    return (

      <View style={styles.container}>
        <ScrollView>
          <View style={styles.content}>
            // Stuff
          </View>

        </ScrollView>
      </View>
    );
  }
}
如果您使用的是类组件，只需使用
state
和
setState
而不是hook

比如：

导出默认类App扩展React.Component{
建造师（道具）{
此.state={
scrollEnabled:true
}
}
停止=（）=>{
this.setState（{scrollEnabled:false}）
}
render（）{
返回(
//东西
)
}
}