토글 메뉴에 반응하여 클릭시 다른 스타일링

Question

How to build a sliding menu using React and Less 튜토리얼에 따라 반응 애플리케이션에서 모바일 햄버거 메뉴를 만들려고합니다.

모두 정상적으로 작동하지만 메뉴가 표시되는지 여부에 따라 버튼의 스타일을 전환하고 싶습니다. 그렇기 때문에 메뉴 클래스 내부의 메뉴 버튼 대신 메뉴 버튼을 시도했지만 오류가 발생했습니다. 오류는 렌더 함수 내에서 상태를 수정할 수 없다고 말합니다. 그래서, 어떻게 해결할 수 있을까요?

나는 react를 사용하지 않았기 때문에 body 요소에 "showing-menu"클래스를 만든 다음 해당 메뉴가 표시되는지 여부에 따라 원하는 스타일을 변경할 수있었습니다. . 이 방법은 Reacive가 아니지만 React에서 어떻게 해결할 수 있습니까?

Answer 1

상태에서 메뉴 토글을 누른 상태로 클래스 목록에 해당 클래스를 추가 할 수 있습니다. 나는

class MyClass extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      toggled: false 
     }; 

     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState({ 
      toggled: true 
     }); 
    } 

    render() { 
     return (
      <div> 
      <div className={"specialClass " + this.state.toggled ? 'myToggledClass' : ''}> 
      <button onClick={this.handleClick}>Click me!</button> 
      </div> 
     ) 
    } 
} 

그래서 위의 예에서 전환 상태가 true로 설정되어 즉시 같이 myToggledClass는 DIV 클래스 목록에 추가됩니다 .. 그래서 여기에 기존의 코드가 무슨 뜻입니다 볼 수 없습니다.