react native：类组件转换成带钩子的函数组件的方法是什么？答案

【问题标题】：react native: what is the way to transform the class component to a function component with hooks?react native：类组件转换成带钩子的函数组件的方法是什么？
【发布时间】：2020-10-21 13:22:06
【问题描述】：

类组件转换成带钩子的函数组件的方法是什么？

在我的示例中，我有一个类组件，我想将其转换为函数组件，该怎么做？

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
 
export default class ExampleOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
      tableData: [
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '456\n789'],
        ['a', 'b', 'c', 'd']
      ]
    }
  }
 
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={state.tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 }
});

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

这是类组件到功能组件的转换：

如果您不想更新状态，则可以从 useState() 中删除 setTableHead 和 setTableData

import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Table, Row, Rows } from 'react-native-table-component'

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: { height: 40, backgroundColor: '#f1f8ff' },
  text: { margin: 6 },
})

const ExampleOne = () => {
  const [tableHead, setTableHead] = useState([
    'Head',
    'Head2',
    'Head3',
    'Head4',
  ])
  const [tableData, setTableData] = useState([
    ['1', '2', '3', '4'],
    ['a', 'b', 'c', 'd'],
    ['1', '2', '3', '456\n789'],
    ['a', 'b', 'c', 'd'],
  ])

  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderWidth: 2, borderColor: '#c8e1ff' }}>
        <Row data={tableHead} style={styles.head} textStyle={styles.text} />
        <Rows data={tableData} textStyle={styles.text} />
      </Table>
    </View>
  )
}

export default ExampleOne

【讨论】：

你能帮我解决一些问题吗？
确定..您的问题是什么？
你有脸书或者我可以联系你的吗？

【解决方案2】：

试试这个

const ExampleOne = () => {
  
  const [tableHead, setTableHead] = useState(['Head', 'Head2', 'Head3', 'Head4']);
  const [tableData, setTableData] = useState([
        ['1', '2', '3', '4'],
        ['a', 'b', 'c', 'd'],
        ['1', '2', '3', '456\n789'],
        ['a', 'b', 'c', 'd']
  ]);
   
 render() {
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
          <Row data={tableHead} style={styles.head} textStyle={styles.text}/>
          <Rows data={tableData} textStyle={styles.text}/>
        </Table>
      </View>
    )
  }
}

export default ExampleOne;

【讨论】：