如何在函数中修改组件的属性？

Question

我正在尝试学习 React 以及如何使用第三方组件，我现在想做的是使用我从 https://www.npmjs.com/package/react-native-countdown-component

安装的组件

objective:

倒计时组件有一个名为 "running" 的 "Props"，我想在组件上 "click" 时对其进行修改。

代码：

我使用的代码只是使用 "expo init MyApp" 创建的全新应用程序，然后我粘贴了代码以导入并生成组件

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>

      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        onPress={() =>
          {
            this.setState({running:true});
          }}
          running={false}
        />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

点击倒计时组件时修改"running"属性的正确方法是什么？

Answer 1

您可以开始正确使用状态了。这次我将使用 React Hooks，它比使用传统的函数式或 class 组件更简单。 See more

每次更新状态时，都会导致组件使用新值重新渲染。

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';

export default function App() {
  const [isRunning, setRunning] = useState(false) //React Hooks
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <CountDown
        until={60}
        size={30}
        //onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: '', s: ''}}
        showSeparator={true}      
        //When component is pressed, updates state to true
        onPress={() => { setRunning(true); }}
        running={isRunning} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 2

我找到了另一种方法，它需要一个新的 class 但我更喜欢 Ian Steban Vasco 的回答。

我发现的解决方案是创建一个新组件来保存倒计时组件的 "state"，然后在 main 方法中使用 MyCountdown 组件而不是直接使用倒计时组件

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';
export default class MyCountdown extends React.Component{
    state = {
        running: false
    };
    handleOnPress = () =>{
        this.setState({running:!this.state.running});
    }
    render(){
        return (
            <CountDown
                until={60}
                size={30}
                //onFinish={() => alert('Finished')}
                digitStyle={{backgroundColor: '#FFF'}}
                digitTxtStyle={{color: '#1CC625'}}
                timeToShow={['M', 'S']}
                timeLabels={{m: '', s: ''}}
                showSeparator={true}      
                onPress={this.handleOnPress}
                running={this.state.running}
              />
        );
    }
}

如何在函数中修改组件的属性？

How to modify a component's property in a function?

react-native

countdown

pause