react知识点

男娘i 2022-01-12 07:49 239阅读 0赞

react行内样式

style={
       {color: "red"}}

箭头函数渲染组件时

{/* 箭头函数带{}需要加上return */}
    
    {users.map((user, i) => {
      return <User user={user} key={i} />;
    })}
    {/* 箭头函数不带{} */}
    {users.map((user, i) => (
      <User user={user} key={i} />
    ))}

jsx是React.createElement(componet,props,…children)函数的语法糖

强烈推荐使用箭头函数，可以不用显示绑定this,

原：this.handleClick.bind(this); 
     
    新：handleClick = () => {
         console.log('handleClick', this); 
     }

React.Fragment支持render多个并列标签,语法糖<></>,但语法糖方式不支持属性值

// 可以用来渲染子元素,避免tr包裹的td中渲染后出现多余的div标签
    render() {
      return (
        <>
          <ChildA />
          <ChildB />
          <ChildC />
        </>
      );
    }

setState是异步的，在设置页面某些state的时候，需要先设置好state，然后再对页面的一些参数进行修改的时候，可以使用setState的回调函数。

打开新窗口 ，发现一个 a标签rel属性(这个属性通常在 设置 target=\_blank之后使用) ，尝试设置，成功解决问题。

<a target='_blank' rel='noopener noreferer' ></a>

a标签添加点击事件不触发默认事件（herf=\{null\}），download可支持下载注意同域下载

<a href={null} download={fileName} onClick={this.handelClick.bind(this,param)}>
       点击下载
    </a>

构造函数中不设置初始化的state也是可以在调用的时候setState的

constructor(props) {
      super(props);
      this.state = {
        id: []
      }
    }
    handleClick = () => {
      // code
      this.setState({
        param1: 'test',
      });
    }

类组件使用使用context

static contextType = ThemeContext;
     render() {
        
       return <Button theme={
        this.context} />;
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 react相关知识点

一、开发环境配置 1. 首先保证安装Node >= 6 和 npm >= 5.2版本以上的node.js环境 2. 然后执行以下的代码，创建一个基本React-App

今天药忘吃喽~/ 2023年02月22日 05:07/ 0 赞/ 2 阅读

相关学习笔记——react细碎知识点

-------------------- > 以下是react学习过程中，遇到的一些细碎，不连续的知识点。例如：类似vue中的template标签，类似vue中的“计算属性”

缺乏、安全感/ 2022年12月19日 00:58/ 0 赞/ 163 阅读

相关 React 知识点小结

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

た入场券/ 2022年11月11日 13:26/ 0 赞/ 376 阅读

相关 React 中的一些 Router 必备知识点

> 本文首发于政采云前端团队博客：React 中的一些 Router 必备知识点 > > https://www.zoo.team/article/react-router

迷南。/ 2022年09月07日 14:44/ 0 赞/ 196 阅读

相关【React】1036- React 中的一些 Router 必备知识点

前言每次开发新页面的时候，都免不了要去设计一个新的 URL，也就是我们的路由。其实路由在设计的时候不仅仅是一个由几个简单词汇和斜杠分隔符组成的链接，偶尔也可以去考虑有没

傷城~/ 2022年08月29日 10:13/ 0 赞/ 240 阅读

相关 react知识点

调用 setState 之后发生了什么？在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconc

我会带着你远行/ 2022年07月10日 04:56/ 0 赞/ 182 阅读

相关 React Router v4 知识点介绍

万恶的根源距离React Router v4 正式发布也已经过去三个月了，这周把一个React的架子做了升级，之前的路由用的还是v2.7.0版的，所以决定把路由也升级下，正

墨蓝/ 2022年05月24日 02:38/ 0 赞/ 198 阅读

相关 react知识点

1、react 高阶函数，选择性渲染，状态提升 2、promise实现 3、数据结构 4、http 5、xss攻击、csrf攻击 6、性能优化 js react 7、react

小灰灰/ 2022年02月04日 07:47/ 0 赞/ 393 阅读

相关 react知识点

react行内样式 style={ {color: "red"}} 箭头函数渲染组件时 {/ 箭头函数带{}需要加上return /}

男娘i/ 2022年01月12日 07:49/ 0 赞/ 240 阅读

相关 react 知识点

1.react中将带标签的字符串转义为html解析 <p dangerouslySetInnerHTML=\{ \{ \_\_html: value.conte

逃离我推掉我的手/ 2021年09月19日 15:58/ 0 赞/ 465 阅读