Блог

Каков способ преобразовать компонент моего класса в функциональный компонент? в моем примере я пытаюсь отобразить панель поиска, и мне нужно сделать это с помощью компонента функции вместо компонента класса.

 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', '456n789'],
        ['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 }
});
  

Вы используете 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;
  

Вероятно, вы можете попробовать следующее:

 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;
  

Я предлагаю более подробно ознакомиться со следующей документацией: Использование перехвата состояния

1 дополнение:

Я бы рассмотрел возможность использования const [search, setSearch] = useState('') только для вашего состояния поиска, потому что оно короче. Указанным способом вы можете хранить больше информации в search состоянии, но вам решать, что лучше подходит для вашей ситуации.

 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}
         />
    );
}