React 第三天学习(react中添加样式,css样式作用域的问题,React 中 绑定事件,双向绑定事件,React组件的生命周期,在 React项目中 使用 bootsrtap)

绑定事件,双向绑定事件,React组件的生命周期,在 React项目中 使用 bootsrtap)"/>

React 第三天学习(react中添加样式,css样式作用域的问题,React 中 绑定事件,双向绑定事件,React组件的生命周期,在 React项目中 使用 bootsrtap)

React 第三天学习

在 react 项目中 添加样式

加载外部 css 样式文件

css样式作用域的问题（modules，localIdentName， local 和 global）

在 React项目中 使用 bootsrtap（ 使用 sass ）

React 中 绑定事件

React中双向绑定事件（e.target.value 和 this.refs.txt.value）

React组件的生命周期

Dream what you want to dream; go where you want to go; be what you want to be, because you have only one life and one chance to do all the things you want to do！

做你想做的梦吧，去你想去的地方吧，成为你想成为的人吧，因为你只有一次生命，一个机会去做所有那些你想做的事。

在 react 项目中 添加样式

第一种方式：

<h1 style={{color:'red',fontSize:'50px'}}>这是评论列表组件</h1>

第一层封装：

将样式对象抽离出来

const cmtStyle={color:'red',fontSize:'30px'}<h1 style={cmtStyle}>这是评论列表组件</h1>

第二层封装

合并成一个大的样式对象

import React from 'react'const styles = {Item: {border: '1px dashed #ccc', margin: '10px 10px'},user: {color: '#333'},content: {color: 'green', fontSize: '22px'}
}export default function CmtItem(props) {return <div style={styles.Item}><h3 style={styles.user}>评论人：{props.user}</h3><p style={styles.content}>评论内容：{props.content}</p></div>
}

第三层封装

抽离为单独的 样式表模块

CmtItem.jsx：

import React from 'react
import styles from '@/components/styles'export default function CmtItem(props) {return <div style={styles.Item}><h3 style={styles.user}>评论人：{props.user}</h3><p style={styles.content}>评论内容：{props.content}</p></div>
}

styles.js:

export default {Item: {border: '1px dashed #ccc', margin: '10px 10px'},user: {color: '#333'},content: {color: 'green', fontSize: '22px'}
}

加载外部 css 样式文件

index.js:

import React from 'react' //创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' //把创建好的 组件 和 虚拟DOM 放到页面上展示的import CmtList from '@/components/CmtList'//使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div><CmtList></CmtList>
</div>, document.getElementById('app'))              

CmtList.jsx：

import React from "react";
import CmtItem from '@/components/CmtItem'const cmtStyle = {color: 'red', fontSize: '30px', textAlign: 'center'