Question

我想通过参考任何文档创建折叠菜单。但它是在类组件中设计的，我想通过功能组件创建它。所以，它这样做 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;

Answer 1

这是因为在功能组件中你必须这样做：

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

此处 setCollapse 已采用 isCollapsed 值。在您的功能组件中设置 isCollapsed 的方式是错误的。而在基于 class 的组件 states 中设置在 object

如何在功能组件中将一个状态等于另一个状态

1 个答案: