React에서 요소 가시성을 전환하는 방법은 무엇입니까?

React에서 요소 표시 또는 숨기기

React 애플리케이션에서는 기본적으로 요소를 표시하거나 숨길 필요가 있는 경우가 많습니다. 사용자 상호 작용에 대해. 기본 React 기능을 사용하여 이를 달성하는 방법을 살펴보겠습니다.

var Search= React.createClass({</p>
<p>});</p>
<p>var 결과 = React.createClass({</p>
<p>});</p>
<p>React.renderComponent(<Search /> , document.body);

이에는 예:

• 검색 구성 요소는 handlerClick 메서드를 트리거하는 버튼을 렌더링합니다.
• 결과 구성 요소는 전환하려는 요소를 나타냅니다.

요소 상태 전환

다음으로 요소 가시성을 전환하려면 상태를 유지해야 합니다. 최신 버전의 React에서는 useState 후크를 사용하여 구성 요소 상태를 관리할 수 있습니다:

const Search = () =&gt ; {<br> const [showResults, setShowResults] = useState(false)<br> const handlerClick = () => setShowResults(true)<br> 반환 (</p>
<p>)<br>}</p>
<p>const Results = () => (<br> <div id="results" className="search-results"></p>
<p></div><br>)</p>
<p>ReactDOM.render(&lt ;검색 />, document.querySelector("#container"))

여기:

• useState는 상태 변수(showResults)를 초기 값(false)으로 초기화합니다.
• setShowResults는 showResults 상태를 업데이트하여 다시 렌더링합니다.
• 버튼을 클릭하면 handlerClick은 showResults를 true로 설정하여 결과 구성 요소를 렌더링합니다.

이 접근 방식은 요소를 표시하거나 숨기는 기본적이고 효율적인 방법을 제공합니다. React 애플리케이션.

위 내용은 React에서 요소 가시성을 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!