如何在 React 中切換元素可見性？

在React 中顯示或隱藏元素

在React 應用程式中，您經常需要根據情況顯示或隱藏元素關於用戶互動。讓我們探索如何使用原生 React 功能來實現這一點。

var Search= React.createClass({</p><pre class="brush:php;toolbar:false">handleClick: function (event) {
    console.log(this.prop);
},
render: function () {
    return (
        <div className=&quot;date-range&quot;>
            <input type=&quot;submit&quot; value=&quot;Search&quot; onClick={this.handleClick} />
        </div>
    );
}

});

var Results = React.createClass({

render: function () {
    return (
        <div id=&quot;results&quot; className=&quot;search-results&quot;>
            Some Results
        </div>
    );
}

});

React.renderComponent(

, document.body);

< p>在此範例中：

• 搜尋元件呈現一個觸發handleClick 方法的按鈕。
• 結果元件代表我們想要切換的元素。

切換元素狀態

要切換元素可見性，我們需要維護狀態。在現代版本的React 中，我們可以使用useState 鉤子來管理元件狀態：

const Search = () => ; {<br> const [showResults, setShowResults] = useState(false)<br> const handleClick = () =>; setShowResults(true)<br> return (</p><pre class="brush:php;toolbar:false"><div>
  <input type="submit" value="Search" onClick={handleClick} />
  { showResults ? <Results /> : null }
</div>

<
const Results = () =>; (

Some Results

)

ReactDOM.render(< ;Search //>, document.querySelector("#container"))

這裡：

Stateuse 用初始值初始化狀態變數(showResults) (false)。

• setShowResults 是一個更新 showResults 狀態的函數，從而觸發重新渲染。
• 點擊按鈕時，handleClick 將 showResults 設為 true，從而渲染 Results 元件。
• 這種方法提供了一種原生且有效的方式來顯示或隱藏 React 應用程式中的元素。

以上是如何在 React 中切換元素可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！