将我的类组件转换为功能组件的方法是什么？答案

【问题标题】：What is the way to transform my class component into function component?将我的类组件转换为功能组件的方法是什么？
【发布时间】：2020-08-27 13:41:32
【问题描述】：

将我的类组件转换为函数组件的方法是什么？在我的示例中，我尝试显示搜索栏，我需要使用函数组件而不是类组件。

import React, { useState} from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
 
const ExampleOne = (props) =>{ 
      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 
 
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】：

您使用 React Hook 并将基于类的组件更改为功能组件

import React, { useState } from "react";
import { SearchBar } from "react-native-elements";

const App = () => {
  const [search, setSearch] = useState("");

  const updateSearch = (search) => {
    setSearch(search);
  };

  return (
    <SearchBar
      placeholder="Type Here..."
      onChangeText={(i) => updateSearch(i)}
      value={search}
    />
  );
};

export default App;

【讨论】：

【解决方案2】：

也许你可以尝试如下：

import React, { useState } from 'react';
import { SearchBar } from 'react-native-elements';

const App = () => 
  const [search, setSearch] = useState({
     text: ''
  });

  return {
    return (
      <SearchBar
        placeholder="Type Here..."
        onChangeText={ (search) => setSearch({ text: search }) }
        value={search.text}
      />
    );
  }
}

export default App;

我建议阅读以下文档以更详细地阅读：Using the State Hook

+1 加法：

我会考虑将const [search, setSearch] = useState('') 仅用于您的搜索状态，因为它更短。通过上述方式，您可以在search 状态中存储更多信息，但您可以自行决定哪种方式更适合您的情况。

【讨论】：

现在您的问题与原来的问题完全不同，可能更容易提出新问题。

【解决方案3】：

import React, { useState } from 'react';
import { SearchBar } from 'react-native-elements';


export default App = () => {
    const [search, setSearch ] = useState('');

    return(
        <SearchBar
        placeholder="Type Here..."
        onChangeText={ search => setSearch(search) }
        value={search}
         />
    );
}

【讨论】：