React 样式使用、图片、条件渲染、双向绑定

样式使用

标签属性style 行内样式

属性class 链接外部样式

src\assets\App1.css

.danger{
  background-color: red;
  color:white;
  border-radius: 10px;
}
.success{
  background-color: green;
  color:white;
  border-radius: 10px;
}
.warn{
  background-color: yellow;
  color:white;
  border-radius: 10px;
}

App.js

// rcc
/**
 * style 行内样式
 * class 样式 存储到外部文件
 * 需要导入使用
 *
 */
import React, { Component } from "react";
// 导入文件需要注意路径
import "./assets/App1.css";
export default class App extends Component {
  size = 18;
  // 练习:写一个按钮点击之后字体变大
  // 分析:1.编写一个按钮并绑定点击事件
  // 2.事件处理方法里 对size属性+1
  // 3.刷新DOM
  sizeChange() {
    this.size++;
    console.log(this.size);
    // 刷新DOM渲染页面
    this.setState({});
  }
  render() {
    return (
      <div>
        {/* JS描述样式的方式 */}
        <div style={{ color: "red", fontSize: this.size }}>Hello React</div>
        <button onClick={this.sizeChange.bind(this)}>字体变大</button>
        <div className="danger">WEB2108</div>
        {/* 动态改变绑定的样式class 根据size变量 */}
        {/* <22 success 否则就是danger */}
        <div className={this.size < 22 ? "success" : "danger"}>WEB2108</div>
        {/* <22 sucess; 22-25 warn; >25 danger */}
        {/* 如果在属性中写JS代码比较多时,建议封装为方法调用即可 */}
        {/* 只有事件触发的方法 调用不加() */}
        <div className={this.showClass()}>WEB2108</div>
      </div>
    );
  }
  showClass() {
    // <22 sucess; 22-25 warn; >25 danger
    if (this.size < 22) return "success";
    if (this.size > 25) return "danger";
    return "warn";
  }
}

图片

// rcc
/**
 *  远程图片
 *  本地图片
 */
import React, { Component } from "react";
import mypng from "./assets/1.png";
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 远程图片 直接填写地址即可 */}
        <img
          src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
          width="200"
        />
        {/* 本地图片 习惯上把资源文件放在/src/assets目录 */}
        {/* 方法一 使用require语法*/}
        <img src={require("./assets/1.png")} />
        {/* 方法二 import mypng是上面引入的别名变量名称 */}
        <img src={mypng}/>
      </div>
    );
  }
}

条件渲染

import React, { Component } from "react";

export default class App extends Component {
  score = 60;
  // delta 是表示变量
  changeScore(delta) {
    // 修改分数
    // this.score = this.score+delta;
    this.score += delta;
    // 刷新DOM
    this.setState({});
  }
  render() {
    return (
      <div>
        <h4>当前分数为:{this.score}</h4>
        <button
          onClick={this.changeScore.bind(this, -10)}
          disabled={this.score <= 0}
        >
          -10分
        </button>
        <button
          onClick={this.changeScore.bind(this, 10)}
          disabled={this.score >= 100}
        >
          +10分
        </button>
        {/* 如果分数大于等于60 则显示及格了 否则显示不及格 */}
        {this.show()}
      </div>
    );
  }
  show() {
    if (this.score >= 60) {
      // 返回JSX语法 不要加引号 加了引号返回的是字符串
      return <div style={{ color: "green" }}>及格</div>;
    } else {
      return <div style={{ color: "red" }}>不及格</div>;
    }
  }
}

双向绑定

在表单元素中

单向数据流：数据渲染到页面DOM上

双向数据流：既满足单向数据流，又可以接收到用户输入的信息。

数据<=>页面

vue 双向绑定v-model 本质是v-bind v-on结合的语法糖

import React, { Component } from 'react'

export default class App extends Component {
  state = {name:'皮卡丘'}
  _nameChange(e){
    // e.target.value 文本输入的值
    console.log(e.target.value);
    let name = e.target.value
    this.setState({name})
  }
  render() {
    // es6结构语法 后续调用更为方便一些
    const {name} = this.state
    return (
      <div>
        <div>输入的内容:{name}</div>
        <input type="text" value={name} onChange={this._nameChange.bind(this)} />
      </div>
    )
  }
}