Блог

Главная - Вопросы по программированию - JS для реагирования без кнопки JSX

JS для реагирования без кнопки JSX

#javascript #reactjs #styles

#javascript #reactjs #стили

Вопрос:

Я пытаюсь перевести этот код в React без кода JSX.

И это то, что я пытаюсь: https://codepen.io/yaminox/pen/Pozzrwv

но кнопка не будет «автоматически отображаться».

    <head>
        <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <style>
            .container {
            display: inline-block;
            cursor: pointer;
            }

            .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
            }

            .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
            }

            .change .bar2 {opacity: 0;}

            .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
            }
        </style>
        <script>
            class MainMenu extends React.Component
            {   

                constructor() {
                    super();
                    this.state = { 
                        menu_is_open: false 
                    };  
                    this.toggle_menu = this.toggle_menu.bind(this);
                };
                
                mainButton(){
                let re = React.createElement; 
                let _style = "";
                if (this.state.menu_is_open == true) _style = " change";
                let classCSS = "container"   _style;
                let attr = {class: classCSS, onClick: this.toggle_menu}
                let result = re('div', attr,
                    re('div', { class : 'bar1' }),
                    re('div', { class : 'bar2' }),
                    re('div', { class : 'bar3' }),
                )
                return result
            }

            toggle_menu(){
                console.log('open_menu '   this.state.menu_is_open );
                this.state.menu_is_open = !this.state.menu_is_open;
                this.render() /* the button wont change  */
            }

            render()
            {   
                let mainMenu = this.mainButton();
                return mainMenu;
            }
        }

        window.onload = function()
        {
            const re = React.createElement; // re = react element
            
            ReactDOM.render(
                re('header', null,
                    re(MainMenu, {}),
                ),
                document.getElementById('header')
            );
        }; 
        </script>
    </head>
    <body>
        <header id="header"></header>
    </body>

Большое спасибо!!

Комментарии:

1. Начиная, вы напрямую изменяете состояние. Если вы хотите переключить состояние, попробуйте поставить в очередь обновление состояния, т. Е. this.setState(prevState => ({ menu_is_open: !prevState.menu_is_open })); .

2. reactiongifs.com/r/but-why.gif