05 【条件渲染】

DSelegent

于 2022-10-25 23:17:52 发布

阅读量669

点赞数

分类专栏： react学习笔记文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/DSelegent/article/details/127524187

版权

本文介绍了React中实现条件渲染的几种方式，包括条件判断语句、三目运算符、与运算符&&、元素变量的使用，以及如何阻止组件渲染。通过这些方法，可以根据应用状态动态更新UI。

摘要由CSDN通过智能技术生成

05 【条件渲染】

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

基础配置

<style>
    .other {
   
        color: #ff0000;
    }
</style>
<body>
<div id="app"></div>

<script type="text/babel">
class Demo extends React.Component {
   
    state = {
   
        type: 1,
        isLogin:false
    }

    render() {
   
        const {
   type} = this.state
        return (
            <div>
                {
   type}
            </div>
        );
    }
}

ReactDOM.render(<Demo/>, document.getElementById('app'))
</script>

1.条件判断语句

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

适合逻辑较多的情况

//1. 第一种方法，声明函数返回dom
showMsg = () => {
   
    let type = this.state.type
    if (type === 1) {
   
        return (<h2>第一种写法：type值等于1</h2>)
    } else {
   
        return (<h2 className="other">第一种写法：type值不等于1</h2<