반작용 : 드롭 다운 구성 요소가 나는 다음과 같다 구성 요소 드롭 다운하면

Question

을 표시 :

{...} 
     this.state = { 
      isVisible: false 
     } 
    } 

    toggleDisplay() { 
     this.setState({isVisible: !this.state.isVisible}); 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.toggleDisplay()}>click</button> 
       {this.state.isVisible ? <MenuElements toggleDisplay={this.toggleDisplay} /> : '' } 
      </div> 
     ) 
    } 
} 

"MenuElements의"리를 가지고 단지 UL이다. 다른 페이지에서이 구성 요소를 여러 번 사용하므로 버튼을 클릭 할 때마다 각 클릭에 대해 "MenuElements"가 표시됩니다. 문제는 하나의 구성 요소 만 표시되기를 원한다는 것입니다. 따라서 MenuElements 컴포넌트가 이미 표시되어있는 경우, 다른 버튼을 클릭하면 이전 컴포넌트가 닫히고 두 번째 버튼이 열립니다.

내 코드에서 어떻게 구현할 수 있습니까?

감사합니다.

Answer 1

나는 이것이 콜백 문맥에 달려 있다고 말할 수 있습니다. 컨텍스트를 강제로 시도 했습니까?

<div> 
    <button onClick={this.toggleDisplay.bind(this)}> 
     click 
    </button> 
{this.state.isVisible ? 
    <MenuElements toggleDisplay={this.toggleDisplay.bind(this)} /> 
: '' } 
</div> 

Answer 2

어떤 식 으로든 어떤 MenuItem이 표시되는지 정의하는 단일 상태가 있어야합니다. Redux와 같은 전역 상태로 갈 수 있지만 재사용 가능한 구성 요소를 만들려고한다면 모든 MenuItem 구성 요소를 부모 구성 요소로 래핑하고 거기에 상태를 유지하는 것이 가장 좋습니다. 그것은 내가 생각하기에, 그것을하는 반응 방식입니다. 구성 요소를 설계하는 방법에 대한 아이디어를 보려면 https://facebook.github.io/react/docs/thinking-in-react.html을 읽어보십시오.

지금까지 Button onClick 처리기에 오류가 있다고 생각합니다. 그것은해야한다 :

// Correct 
this.setState((prevState, props) => ({ 
    counter: prevState.counter + props.increment 
})); 

// Wrong 
this.setState({ 
    counter: this.state.counter + this.props.increment, 
});