React 详解，组件，条件渲染

最新推荐文章于 2024-08-03 01:19:16 发布

置顶 cyclv

最新推荐文章于 2024-08-03 01:19:16 发布

阅读量790

点赞数

分类专栏：前端框架学习文章标签： React组件 React

本文链接：https://blog.csdn.net/weixin_41487694/article/details/95043712

版权

前端框架学习专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍React的基础安装与使用，包括npm和webpack的配置。深入探讨JSX语法、动态设置className的方法，以及如何避免字符串拼接警告。同时，讲解了组件的定义、使用和封装，以及组件间通过props进行数据传递的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装使用React，（npm，webpack）

命令：

npx create-react-app my-app
cd my-app
npm start

安装教程，可以参考菜鸟教程 React安装还有介绍目录

jsx，动态设置，react的className

一方法（拼接）
<div className={ "flexct" + this.state.mycantact}></div>

该方法报的警告
./src/Components/head.js
Line 21:  Unexpected string concatenation of literals  no-useless-concat

字符传拼接，会有警告

二方法.
<div className={this.state.contant ? 'flexfs displaynone' : 'flexfs' }>{listItems}</div>

三目运算符没有报错

.组件封装，引入

组件更加详细用法说明请看：https://blog.csdn.net/weixin_41487694/article/details/103125518

1.定义组件（两种方法：函数定义，es6的class定义）

创建组件，新建一个js文件 header.js

使用函数定义

function Header（）{
    return <h1>我是页面头部</h1>;
}

使用es6的class定义

class Header extends React.Component {
  render() {
    return <h1>我是头部</h1>;
  }
}

2.使用组件

在index.js这个页面使用

3.引入组件

import Head form ‘../header.js’

4.组件之间的传参（props）

父组件传子组件

需要在index.js页面中 <Header></Header> 上加入<Header name=‘我是参数张三’></Header> （name这个时可以自定义的）

还可以这样写 <Headercontact='我是参数张三'></Header>

需要在header.js的文件中进行接参

function Header（props）{
    return <h1>{props.name}</h1>;
}

子组件传父组件

在父组件中添加监测事件Getprops，

<Header Getprops={this.navclicl} name='headerbg' contact='true'></Header>

子组件中可以绑定事件，触发后进行传入父组件中

    navmobileclick =()=>{
        this.props.Getprops('参数')
    }

更简单的写法

 <div onClick={()=>that.props.Getprops('参数')}>点我向父组件传参</div>

条件渲染 React

&&符号（如果this.props.topinfo.subhead 为真，渲染div。其中his.props.topinfo.subhead 为引入组件时传入的参数）

{ this.props.topinfo.subhead &&
     <div className='navtop'></div>
}

三目运算符（同理this.props.bgcolor 为引入组件时传入的参数）

{this.props.bgcolor === 'grey' ? (
     <div className='svg-wave-grey'></div>
) : (
     <div className='svg-wave-white'></div>
)}