如何将 class 组件 table 转换为功能组件？

Question

我是 React Native 的初学者。我通过功能组件学习了 React。我想在我的项目中使用此示例 table，但是我不知道如何处理 class 组件。我在谷歌上搜索并尝试将 class 组件转换为功能组件，但我不能..我已经为此工作了几个小时。

如果有人愿意提供帮助，我将不胜感激！！

import React, {Component} from 'react';
import {StyleSheet, View, Text, TouchableOpacity, Alert} from 'react-native';
import {
  Table,
  TableWrapper,
  Col,
  Cols,
  Cell,
} from 'react-native-table-component';

export default class ExampleFive extends Component {
  constructor(props) {
    super(props);
    const elementButton = value => (
      <TouchableOpacity onPress={() => this._alertIndex(value)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>공강</Text>
        </View>
      </TouchableOpacity>
    );

    this.state = {
      tableTitle: [
        '1교시',
        '2교시',
        '3교시',
        '4교시',
        '5교시',
        '6교시',
        '7교시',
        '8교시',
        '9교시',
      ],
      tableData: [
        [
          'Mon',
          elementButton('Mon1'),
          elementButton('Mon2'),
          elementButton('Mon3'),
          elementButton('Mon4'),
          elementButton('Mon5'),
          elementButton('Mon6'),
          elementButton('Mon7'),
          elementButton('Mon8'),
          elementButton('Mon9'),
        ],
        [
          'Tue',
          elementButton('Tue1'),
          elementButton('Tue2'),
          elementButton('Tue3'),
          elementButton('Tue4'),
          elementButton('Tue5'),
          elementButton('Tue6'),
          elementButton('Tue7'),
          elementButton('Tue8'),
          elementButton('Tue9'),
        ],
        [
          'Wed',
          elementButton('Wed1'),
          elementButton('Wed2'),
          elementButton('Wed3'),
          elementButton('Wed4'),
          elementButton('Wed5'),
          elementButton('Wed6'),
          elementButton('Wed7'),
          elementButton('Wed8'),
          elementButton('Wed9'),
        ],
        [
          'Thus',
          elementButton('Thus1'),
          elementButton('Thus2'),
          elementButton('Thus3'),
          elementButton('Thus4'),
          elementButton('Thus5'),
          elementButton('Thus6'),
          elementButton('Thus7'),
          elementButton('Thus8'),
          elementButton('Thus9'),
        ],
        [
          'Fri',
          elementButton('Fri1'),
          elementButton('Fri2'),
          elementButton('Fri3'),
          elementButton('Fri4'),
          elementButton('Fri5'),
          elementButton('Fri6'),
          elementButton('Fri7'),
          elementButton('Fri8'),
          elementButton('Fri9'),
        ],
      ],
    };
  }

  _alertIndex(value) {
    Alert.alert(`This is column ${value}`);
  }

  render() {
    const state = this.state;
    return (
      <View style={styles.container2}>
        <Text>MY SCHEDULE</Text>
        <Table style={{flexDirection: 'row'}} borderStyle={{borderWidth: 1}}>
          {/* Left Wrapper */}
          <TableWrapper style={{width: 80}}>
            <Cell data="" style={styles.singleHead} />
            <TableWrapper style={{flexDirection: 'row'}}>
              <Col
                data={state.tableTitle}
                style={styles.title}
                heightArr={[30, 30, 30, 30, 30, 30, 30, 30, 30]}
                textStyle={styles.titleText}></Col>
            </TableWrapper>
          </TableWrapper>

          {/* Right Wrapper */}
          <TableWrapper style={{flex: 1}}>
            <Cols
              data={state.tableData}
              heightArr={[40, 30, 30, 30, 30, 30, 30, 30, 30, 30]}
              textStyle={styles.text}
            />
          </TableWrapper>
        </Table>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container2: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
  singleHead: {width: 80, height: 40, backgroundColor: '#c8e1ff'},
  head: {flex: 1, backgroundColor: '#c8e1ff'},
  title: {flex: 2, backgroundColor: '#f6f8fa'},
  titleText: {marginRight: 6, textAlign: 'right'},
  text: {textAlign: 'center'},
  btn: {
    width: 40,
    height: 18,
    marginLeft: 8,
    backgroundColor: '#c8e1ff',
    borderRadius: 2,
  },
  btnText: {textAlign: 'center'},
});

Answer 1

你所要做的就是用函数声明替换class声明（用constructor/super(props)等），把tableTitle和tableData在 useState 中而不是 this.state = 语句中，并且 return render() return 直接在你的新功能组件中

Answer 2

此组件转换为功能组件后将变为：

import React, { useState } from 'react';
import {StyleSheet, View, Text, TouchableOpacity, Alert} from 'react-native';
import {
  Table,
  TableWrapper,
  Col,
  Cols,
  Cell,
} from 'react-native-table-component';

const ExampleFive = (props) => {
  const elementButton = value => (
      <TouchableOpacity onPress={() => this._alertIndex(value)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>공강</Text>
        </View>
      </TouchableOpacity>
  );

  let myState = { /*all the content of this.state*/ };

  const [state, setState] = useState(myState);
  
  const _alertIndex(value) {
    Alert.alert(`This is column ${value}`);
  }

    return (
      <View style={styles.container2}>
        <Text>MY SCHEDULE</Text>
        <Table style={{flexDirection: 'row'}} borderStyle={{borderWidth: 1}}>
          {/* Left Wrapper */}
          <TableWrapper style={{width: 80}}>
            <Cell data="" style={styles.singleHead} />
            <TableWrapper style={{flexDirection: 'row'}}>
              <Col
                data={state.tableTitle}
                style={styles.title}
                heightArr={[30, 30, 30, 30, 30, 30, 30, 30, 30]}
                textStyle={styles.titleText}></Col>
            </TableWrapper>
          </TableWrapper>

          {/* Right Wrapper */}
          <TableWrapper style={{flex: 1}}>
            <Cols
              data={state.tableData}
              heightArr={[40, 30, 30, 30, 30, 30, 30, 30, 30, 30]}
              textStyle={styles.text}
            />
          </TableWrapper>
        </Table>
      </View>
    );
}

const styles = StyleSheet.create({
  container2: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
  singleHead: {width: 80, height: 40, backgroundColor: '#c8e1ff'},
  head: {flex: 1, backgroundColor: '#c8e1ff'},
  title: {flex: 2, backgroundColor: '#f6f8fa'},
  titleText: {marginRight: 6, textAlign: 'right'},
  text: {textAlign: 'center'},
  btn: {
    width: 40,
    height: 18,
    marginLeft: 8,
    backgroundColor: '#c8e1ff',
    borderRadius: 2,
  },
  btnText: {textAlign: 'center'},
});

export default ExampleFive;

注：

已删除 constructor；
在功能组件中，state 应该使用 hook 来管理 useState;
删除了render。

如何将 class 组件 table 转换为功能组件？

How to convert class component table to functional component?

reactjs

react-native