Quel est le moyen de transformer mon composant de classe en composant de la fonction? Dans mon exemple, j'essaie d'afficher la barre de recherche et j'ai besoin de le faire avec un composant de la fonction à la place du composant de classe.
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 }
});
3 Réponses :
Vous pouvez probablement essayer comme suit: Je suggère la documentation suivante à lire plus de détails: à l'aide du crochet d'état +1 addition: Je envisagerais d'utiliser const [recherche, seeSearch] = usestate ('') uniquement pour votre état de recherche car il est plus court. Dans la manière mentionnée, vous pouvez stocker plus d'informations dans l'état de recherche , mais c'est à vous de mieux que vous conviennent à votre situation mieux.
Maintenant, vous avez une question complètement différente de l'original, probablement plus facile à poser une nouvelle question.
Vous utilisez un crochet de réaction et changez votre composant basé sur la classe en composant fonctionnel
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}
/>
);
}
Pouvez-vous être plus précis sur ce que vous voulez savoir? Vous recherchez des directives générales ou juste quelqu'un pour faire le travail pour vous?