React基础知识（组件、组件传值、JSX、响应式设计、事件绑定）

最新推荐文章于 2024-01-02 15:38:14 发布

火腿肠烧烤大赛冠军

最新推荐文章于 2024-01-02 15:38:14 发布

阅读量397

点赞数

分类专栏： react 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/s2422617864/article/details/114434144

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文深入探讨了React中函数式组件和类组件的写法，以及如何在组件间进行传值，包括父传子和子传父的实现方式。同时，讲解了JSX的基本使用规则，如类名绑定、内联样式以及防止内容转义的方法。此外，还展示了响应式设计和事件绑定的实例。

摘要由CSDN通过智能技术生成

组件

// 函数写法
function App() {
  return (
    <div className="App">
      hello World
    </div>
  );
}

export default App;



// 类写法
import React from 'react';
class App extends React.Component {
  render() {
    return (
      <div className="App">
        hello World
      </div>
    );
  }
}
export default App;

组件传值：

父传子

父：

        <TodoItem content = {item}></TodoItem>

子：

import React ,{Component} from 'react';
class TodoItem extends Component{
    render(){
        return(
            <div>{this.props.content}</div>
        )
    }
};
export default TodoItem;

子传父

父：
注：要把所传递的函数指向改为父组件

 <TodoItem ItemDelete = {this.handleItemDelete.bind(this)} content = {item} index ={index}></TodoItem>

子：

import React ,{Component} from 'react';
class TodoItem extends Component{
    constructor(props){
        super(props);
        //在这里继承节约性能
        this.handClick = this.handClick.bind(this);
    }
    render(){
        return(
            <div onClick = {this.handClick}>{this.props.content}</div>
        )
    };
    handClick(){
        this.props.ItemDelete(this.props.index);
    }
};
export default TodoItem;

JSX

1.只要用到了JSX语法就要引入React毕竟要由人家解析

2.在React中jsx语法不需要像平时一样用‘’ 直接两个标签括起来就可以

3.与vue不同的是组件名称不允许小写字母开头必须写成这样的

4.jsx中的注释要写成这样{/我是注释/}或者

{
//我是注释
}

5.class不用class=“"而是用className=”“；

6.用dangerouslySetInnerHTML={{__html:item}}来阻止转义（并不安全）

7. 输入内容用html代替for来扩大点击范围

响应式设计、事件绑定

注意如下：

// 类写法
import { Fragment } from "react";
import React from 'react';
class TodoList extends React.Component {

  // super继承conponent中的属性
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      list: [],
    }
  };


  // 这里需要改变this指向
  // 这里需要花括号
  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}
          /><button>提交</button>
        </div>
        <ul>
          <li>学英语</li>
          <li>Learning React</li>
        </ul>
      </Fragment>
    );
  };
  handleInputChange(e) {
    // 这里需要setState
    this.setState({
      inputValue:e.target.value
    })
  };
}
export default TodoList;