Блог

Я хочу создать меню свертывания по ссылке из любой документации.Но он разработан в компоненте класса, и я хочу создать это с помощью функционального компонента. итак, он делает это onToggle={(isCollapsed)=>this.setState({collapsed:isCollapsed})}> . Но я не могу сделать это в функциональном компоненте:

Код компонента класса:

   import React, { Component } from 'react';
  import{ View,Text,Button } from 'react-native';
  import {Collapse, CollapseHeader, CollapseBody} from "accordion-collapse-react-native";
  
class Example extends Component<>{ 
constructor(props){
    super(props);
    this.state = {
    collapsed:false,//do not show the body by default
    }
}
render(){
    return (
    <View>
        <Button 
            title={"Click here too"} 
            onPress={()=>this.setState({collapsed:!this.state.collapsed})}
        />
        <Collapse 
            isCollapsed={this.state.collapsed} 
            onToggle={(isCollapsed)=>this.setState({collapsed:isCollapsed})}>
          <CollapseHeader>
            <Text>Click here</Text>
          </CollapseHeader>
          <CollapseBody>
            <Text>WHoooHo!</Text>
          </CollapseBody>
        </Collapse>
      </View>
      );
      }
}
 

Мой код функционального компонента:

 import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';
import {
  Collapse,
  CollapseHeader,
  CollapseBody,
} from 'accordion-collapse-react-native';
import {FlatList} from 'react-native-gesture-handler';

const TestScreen = (props) => {
  const [collapse, setCollpase] = useState(false);
 
    console.log('click', collapse);
  return (
    <View>
      {/* <Button title={'Click here too'} /> */}
      <Collapse
        isCollapsed={collapse}
        onToggle={(isCollapsed) => setCollpase(collapsed:isCollapsed)}
      >
        <CollapseHeader onPress={() => setCollpase(!collapse)}>
          <Text>Click here</Text>
        </CollapseHeader>
        <CollapseBody>
          <Text>WHoooHo!</Text>
        </CollapseBody>
      </Collapse>
    </View>
  );
};

export default TestScreen;
 

Это потому, что в функциональном компоненте вы должны сделать это следующим образом:

 onToggle={(isCollapsed) => setCollpase(isCollapsed)}
 

здесь setCollapse уже принимается isCollapsed значение. Неправильный способ настройки isCollapsed в вашем функциональном компоненте. В то время как в class базовом компоненте states устанавливаются в object