如何将我的代码（this.state）转换为useState（）？

异族

我需要将以下代码转换为无状态功能组件，而无需使用类。不幸的是，我不太擅长将基于类的组件解释为功能组件，因此我不确定语法是什么。

class Example extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: true,
        };
  }

    render() {
        return (
            <IconSettings iconPath="/assets/icons">
                {this.state.isOpen ? (
                    <AlertContainer>
                        <Alert
                            dismissible
                            icon={<Icon category="utility" name="user" />}
                            labels={{
                                heading: 'Logged in as John Smith ([email protected]).',
                                headingLink: 'Log out',
                            }}
                            onClickHeadingLink={() => {
                                console.log('Link clicked.');
                            }}
                            onRequestClose={() => {
                                this.setState({ isOpen: false });
                            }}
                        />
                    </AlertContainer>
                ) : null}
            </IconSettings>
        );
    }
}

阿斯玛

如果要使用功能组件，请尝试以下示例：

import React, {useState} from 'react';

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <IconSettings iconPath="/assets/icons">
      {isOpen ? (
         <AlertContainer>
            <Alert
                dismissible
                icon={<Icon category="utility" name="user" />}
                labels={{
                  heading: 'Logged in as John Smith ([email protected]).',
                  headingLink: 'Log out',
                }}
                onClickHeadingLink={() => console.log('Link clicked.')}
                onRequestClose={() => setIsOpen(false)}
            />
               </AlertContainer>
        ) : null}
    </IconSettings>
  )

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。