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'