반응에서 클래스 전환

반응에서 클래스 전환

메뉴 버튼이 있는 프로젝트에서 리액트를 사용하고 있습니다.

<a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>

Sidenav 컴포넌트는 다음과 같습니다.

<Sidenav ref="menu" />

그리고 메뉴를 전환하기 위해 다음과 같은 코드를 작성했습니다.

class Header extends React.Component {

    constructor(props){
        super(props);
        this.toggleSidenav = this.toggleSidenav.bind(this);
    }

    render() {
        return (
          <div className="header">
            <i className="border hide-on-small-and-down"></i>
            <div className="container">
          <a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a>
          <Menu className="menu hide-on-small-and-down"/>
          <Sidenav />
        </div>
          </div>
        )
    }

    toggleSidenav() {
        this.refs.btn.classList.toggle('btn-menu-open');
    }

    componentDidMount() {
        this.refs.btn.addEventListener('click', this.toggleSidenav);
    }

    componentWillUnmount() {
        this.refs.btn.removeEventListener('click', this.toggleSidenav);
    }
}

중요한 것은 말이다this.refs.sidenavDOM 요소가 아니기 때문에 그에 대한 클래스를 추가할 수 없습니다.

수업 전환 방법을 설명해 주실 수 있나요?Sidenav컴포넌트를 사용할 수 있습니까?

React가 DOM을 올바르고 효율적으로 렌더링하려면 구성 요소의 상태를 사용하여 클래스 이름과 같은 구성 요소 매개변수를 업데이트해야 합니다.

업데이트: 버튼을 클릭 한 번으로 Sidemenu를 전환하도록 예를 업데이트했습니다.이것은 필수는 아니지만, 어떻게 동작하는지는 알 수 있습니다."this.state"와「this.props」를 참조해 주세요.저는 Redux 컴포넌트를 사용하는 데 익숙합니다.

constructor(props){
    super(props);
}

getInitialState(){
  return {"showHideSidenav":"hidden"};
}

render() {
    return (
        <div className="header">
            <i className="border hide-on-small-and-down"></i>
            <div className="container">
                <a ref="btn" onClick={this.toggleSidenav.bind(this)} href="#" className="btn-menu show-on-small"><i></i></a>
                <Menu className="menu hide-on-small-and-down"/>
                <Sidenav className={this.props.showHideSidenav}/>
            </div>
        </div>
    )
}

toggleSidenav() {
    var css = (this.props.showHideSidenav === "hidden") ? "show" : "hidden";
    this.setState({"showHideSidenav":css});
}

이제 상태를 전환하면 구성 요소가 업데이트되고 sidenav 구성 요소의 클래스 이름이 변경됩니다.CSS를 사용하여 클래스 이름을 사용하여 sidenav를 표시하거나 숨길 수 있습니다.

.hidden {
   display:none;
}
.show{
   display:block;
}

refsDOM 요소가 아닙니다.DOM 요소를 찾으려면 , 를 사용해야 합니다.findDOMNode멘토드부터.

도, 이거

var node = ReactDOM.findDOMNode(this.refs.btn);
node.classList.toggle('btn-menu-open');

또는 다음과 같이 사용할 수 있습니다(거의 실제 코드).

this.state.styleCondition = false;


<a ref="btn" href="#" className={styleCondition ? "btn-menu show-on-small" : ""}><i></i></a>

그런 다음 변경할 수 있습니다.styleCondition상태 변경 조건에 따라 달라집니다.

반응 시 기능 전환

처음에는 다음과 같은 생성자를 생성해야 합니다.

constructor(props) {
        super(props);
        this.state = {
            close: true,
        };
    }

그런 다음 다음과 같은 함수를 만듭니다.

yourFunction = () => {
        this.setState({
            close: !this.state.close,
        });
    };

그럼 이렇게 쓰세요.

render() {
        const {close} = this.state;
        return (

            <Fragment>

                 <div onClick={() => this.yourFunction()}></div>

                 <div className={close ? "isYourDefaultClass" : "isYourOnChangeClass"}></div>

            </Fragment>
        )
    }
}

더 나은 해결책을 제시해 주세요.

오리 드로리의 말이 맞아요, 리액트 방식으로 하는 게 아니에요.리액트에서는 DOM을 사용하여 클래스와 이벤트핸들러를 변경하지 않는 것이 이상적입니다.React 컴포넌트의 render() 메서드로 실행합니다.이 경우 sideNav와 Header가 됩니다.코드로 이것을 실행하는 방법의 대략적인 예는 다음과 같습니다.

헤더

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

render() {
    return (
        <div className="header">
            <i className="border hide-on-small-and-down"></i>
            <div className="container">
                <a ref="btn" href="#" className="btn-menu show-on-small"
                onClick=this.showNav><i></i></a>
                <Menu className="menu hide-on-small-and-down"/>
                <Sidenav ref="sideNav"/>
            </div>
        </div>
    )
}

showNav() {
  this.refs.sideNav.show();
}
}

사이드

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

   render() {
     if (this.state.open) {
       return ( 
         <div className = "sideNav">
            This is a sidenav 
         </div>
       )
     } else {
       return null;
     }

   }

   show() {
     this.setState({
       open: true
     })
   }
 }

여기서 볼 수 있듯이 클래스를 전환하지 않고 컴포넌트 상태를 사용하여 SideNav를 렌더링하고 있습니다.리액션의 전제는 이 방법 또는 유사합니다.부트스트랩을 사용하는 경우 부트스트랩 요소를 리액트 방식으로 통합하는 라이브러리가 있어 DOM을 직접 조작하는 대신 동일한 요소를 사용하여 상태를 설정할 수 있습니다.이 문서는 https://react-bootstrap.github.io/에서 확인할 수 있습니다.

도움이 되길 바라며, React를 즐겨주세요!

React 16.8이 출시된 후 2019년에 이 글을 읽으신 분은 React Hooks를 보시기 바랍니다.컴포넌트의 처리 상태를 심플하게 합니다.그 문서들은 당신이 필요로 하는 것의 정확한 예와 함께 매우 잘 쓰여져 있다.

언급URL : https://stackoverflow.com/questions/36403101/toggle-class-in-react