首页 > 其他分享 >react 杂记2

react 杂记2

时间:2023-05-09 16:34:15浏览次数:32  
标签:逻辑 函数 react 杂记 事件 变量

  1. 大括号 - JavaScript 的“新世界”
    {变量}    {方法(param)}    {逻辑}     {逻辑+html}  
  2. {}里面还是可以应用变量  再用{}获取即可

     

  3. 函数 (onClick),变量 (movieName) ,插槽(children),都是作为props传递给子组件的

     

  4. 添加事件

    注意:传递的是一个函数

     

  5. 自定义事件:  以on开头 驼峰命名 eg:onAlert
  6. 阻止事件传播  e.stopPropagation()
  7. 阻止默认事件  e.preventDefault()

     

标签:逻辑,函数,react,杂记,事件,变量
From: https://www.cnblogs.com/fanjiawen/p/17356558.html

相关文章

  • React Native之React基础
    ReactNative的基础是React,是在web端非常流行的开源UI框架。要想掌握ReactNative,先了解React框架还是很有帮助的。主要理解三个概念:组件、状态和JSX。使用组件的方式描述UI 使用组件的方式描述UI在React中,所有的UI都是通过组件去描述和组织的。可以认为,Reac......
  • Reactor之Schedulers,publishOn 和 subscribeOn
    Schedulers类似Executor,是Reactor的线程调度接口。提供以下几种线程执行环境:当前线程(Schedulers.immediate());可重用的单线程(Schedulers.single())。注意,这个方法对所有调用者都提供同一个线程来使用,直到该调度器被废弃。如果你想使用独占的线程,请使用Schedulers.newSingle();......
  • react + antd table列表自动滚动
    /***@file:table列表自动滚动,鼠标划入滚动暂停,鼠标划出滚动继续*/const[dataSource,setDataSource]=useState([])const[timer,setTimer]=useState()useEffect(()=>{if(dataSource.length){autoScroll(dataSource)}return()=>cl......
  • Reactor接口之五
    defaultIfEmpty@TestpublicvoidtestDefaultIfEmpty(){Flux.range(1,10).defaultIfEmpty(30).subscribe(System.out::println);}@TestpublicvoidtestDefaultIfEmpty1(){Flux.empty().defaultIfEmpty(30)......
  • [React Typescript] ComponentProps
    Blog:https://www.totaltypescript.com/react-component-props-type-helper GetanyProptypefromhtmlelement:import{ComponentProps}from"react";typeButtonProps=ComponentProps<"button">; GetpropstypefromaComponen......
  • Reactor接口之四
    interval@TestpublicvoidtestInterval(){CountDownLatchcountDownLatch=newCountDownLatch(1);Flux.range(1,10).zipWith(Flux.interval(Duration.ofSeconds(1))).subscribe(System.out::println,null,countDownLatch::countD......
  • Reactor接口之三
    defer@TestpublicvoidtestDefer(){Flux.defer(()->{returnFlux.range(0,10);}).subscribe(System.out::println);}输出0到9。defer每次对结果Flux进行订阅时,懒惰地提供发布服务。因此实际的源实例化会推迟到每次订阅时。collect@Te......
  • Reactor接口之二
    merge@TestpublicvoidtestMerge(){Flux.merge(Flux.just(1,2,3),Flux.range(5,6)).subscribe(System.out::println);}merge将多个Flux合并成一个Flux。 @TestpublicvoidtestMerge1(){Flux.range(1,5).mergeWith(Flux.just(8,9......
  • react-navigation 页面跳转
    使用react-navigation在进行页面跳转的时候,遇到些问题,现在来总结下,主要是web和android的差异react-navigation页面跳转方法navigationnavigate-转到另一个屏幕,找出需要采取的操作replace-用新屏幕替换当前屏幕push-将新屏幕推到堆栈上pop-回到堆栈中popToTo......
  • React Native之JSX语法
    一、什么是JSXJSX即JavaScriptXML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。二、JSX的基本使用 2.1为什么使用JSX​原......