如何在 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);

在此示例中：

• 搜索组件呈现一个触发 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"))

这里：

• useState 使用初始值初始化状态变量 (showResults) (false)。
• setShowResults 是一个更新 showResults 状态的函数，从而触发重新渲染。
• 单击按钮时，handleClick 将 showResults 设置为 true，从而渲染 Results 组件。

这种方法提供了一种原生且有效的方式来显示或隐藏 React 应用程序中的元素。

以上是如何在 React 中切换元素可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！