react-基础学习

1 JSX语法注释

在JSX语法中注释时，有两种方式。都需要 用 花括号 包裹
● 多行注释

{ /*
 这是
多行注释
的内容
*/}

● 单行注释

{ // 这是单行注释的内容 }

2 .css 引入的方式

● 在 .js 文件中引入 .css 文件时，直接用 import './style.css' 即可。
● 需要把 .css 文件的引入放在 .js 文件的上方。

3 类样式-class与className

● 在标签中使用 className 替换 class

4 html自动转义标签-v-html与dangerouslySetInnerHTML

用于HTML自动转义。
● v-html

<div v-html="<h1>Hello</h1>"></div>

● dangerouslySetInnerHTML

// 第一个括号表示 参数
// 第二个括号表示 对象
// __HTML 是固定的
// 传入参数即可
<div dangerouslySetInnerHTML={{__html: <h1>Hello</h1>}}></div>

5 label的作用

label用于 扩大点击区域。
实现功能：点击某一块文字时，输入框获得焦点。

<label htmlFor="inserInput>点我，输入框获得焦点</label>
<input id="inserInput></input>

6 绑定事件，获得当前页面的this指针

在事件中的后面，需要添加 .bind(this, param) 进行绑定。

// 无参数
onClick={this.handleChange.bind(this)};

// 有参数
onClick={this.handleChange.bind(this，index)};

7 父子组件通讯

父组件：TodoList.js ，子组件TodoItem.js ,点击子组件中的每一项实现删除功能 ● 1 新建子组件 TodoItem.js 文件 创建内容

import React from 'react'; // 引入react
const Component = React.Component; // 获取Component

// 使用继承的方式
class TodoItem extends Component {
    // 使用构造器，super(props)
    constructor(props) {
        super(props);
        // 为子组件的事件绑定 this指针
        this.handleDeleteClick = this.handleDeleteClick.bind(this);
    }
    render() {
        return (
            <li onClick={this.handleDeleteClick} dangerouslySetInnerHTML={{__html: this.props.content}}></li>
        )
    };
    // 子组件-删除事件 使用this.props.父组件绑定的方法属性，将当前的this.props.index传给父组件
    handleDeleteClick() {
        this.props.deleteItem(this.props.index);
  }
}
export default TodoItem;

● 2 在父组件 TodoLits.js 文件中引入子组件

import TodoItem from './TodoItem';

● 3 在父组件的 render 方法中使用

render() {
<ul>
          {
            this.state.valueList.map((item, index) => {
              return (
                <TodoItem key={index} content={item} index={index} deleteItem={this.handleItemDelete.bind(this)}></TodoItem>
              )
            })
          }
 </ul>
}

// 父组件-删除事件
handleItemDelete(index) {
    // state不允许直接修改内容，可以考副本使用
    const list = [...this.state.valueList];
    list.splice(index, 1);
    this.setState({
      valueList: list
    })
  }

8 显示与隐藏

用于显示与隐藏的方式有三种，与 vue 中的方式差不多。 ● 1 通过state 变量 与 v-if 注意：这种方式与 v-if 的作用一样，不适合频繁控制显示隐藏的情况，因为它会重新渲染元素，比较耗费性能。

// 在 构造器中的state内定义变量
constructor(props) {
    super(props);
    this.state = {
          isShowItem: false
    };
  }
  
  render() {
    return (
      <Fragment>
         <ul >
          {
            this.state.isShowItem ? (
                <div>元素</div>
            ):null
          }
        </ul>
      </Fragment>
    );
  }

● 2 通过style中的display属性 与 v-show

// 在 构造器中的state内定义变量
constructor(props) {
    super(props);
    this.state = {
          isShowItem: 'none'
    };
  }
  
  render() {
    return (
      <Fragment>
        <div style={{display: this.state.isShowItem}}></div>
      </Fragment>
    );
  }

● 3 通过动听的控制className 与 :class

class TodoList extends Component {
  // 在 构造器中的state内定义变量
  constructor(props) {
    super(props);
    this.state = {
      isShowItemBool: false
    };
  }
  constructor(props){
      super(props);
      this.state = {
          isShow:true
      }
  }
  render(){
      return (
          <div>
          // 写法一 
          <div className={this.state.isShow?'old':'old is-show'}>显示的元素</div>
          // 写法二
          <div className={`${this.state.isShow?'':'is-show'} old`}>显示的元素</div> 
          </div>
      )
  }
  }

9 组件拆分与组件之间的传值

• 组件的定义：页面上的每一个部分都可以称为组件。
• 拆分组件的意义：页面上的逻辑太复杂，拆分成小组件，逻辑相应的比较简单。