React 万能的函数表达式

最新推荐文章于 2021-10-02 14:24:25 发布
最新推荐文章于 2021-10-02 14:24:25 发布
阅读量140 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/shamgod/p/5049950.html
版权

一、语法简介

表达式可以以下两种方法，

(1)(function A(){})(this),(this)参数在函数外面

(2)(function B(){}(this)),(this)参数在函数里面

(1)和(2)的区别在于，(1)的左边的一对括号是强制A()求值，返回函数的引用，再传this参数调用函数求值，而(2)是把(this)传给A(),直接返回函数的返回值，而不是函数引用本身。

 

方式一：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script src="./react-0.13.2/build/react.js"></script>
    <script src="./react-0.13.2/build/JSXTransformer.js"></script>
	<script type="text/jsx">
		var style = {
			color : "red",
			border: "1px #000 solid",
		};
		var HelloWorld = React.createClass({
			render: function(){
				return <p>你好， {
					(function(obj){
						if(obj.props.name)
							return obj.props.name
						else
							return "World!"
					})(this)
				}</p>;
			}
		});
		React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
	</script>
</body>

</html>

　　

方式二：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script src="./react-0.13.2/build/react.js"></script>
    <script src="./react-0.13.2/build/JSXTransformer.js"></script>
	<script type="text/jsx">
		var style = {
			color : "red",
			border: "1px #000 solid",
		};
		var HelloWorld = React.createClass({
			render: function(){
				return <p>你好， {
					(function(obj){
						if(obj.props.name)
							return obj.props.name
						else
							return "World!"
					}(this))
				}</p>;
			}
		});
		React.render(<div style={style}><HelloWorld name="李小龙!"></HelloWorld></div>, document.body);
	</script>
</body>

</html>

　　

运行结果：

转载于:https://www.cnblogs.com/shamgod/p/5049950.html

weixin_30416871
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-mathjax：显示数学公式的React组件
02-03
react-mathjax React组件以显示数学公式。 安装 $ npm i react-mathjax --save 用法 const MathJax = require ( 'react-mathjax' ) const tex = `f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} \\,d\\xi` module . exports = ( ) => { return ( < MathJax> < div>
react 基础篇 4 {表达式}
笑望灬星辰
05-21 296
标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js 表达式</title> </head> <body> <div id="app"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="
前端 react-render 中有趣的函数/玩法（ jsx 语法 ）
qq_52522995的博客
10-02 224
react -jsx 就是用js语法封装了各种组件，通过挂载组件实现各种功能 （ALL in JS） 1.map函数 一个数组使用map函数可以快速遍历应对其进行操作； 例1：一个数组中含有一些数，遍历输出数组中的数乘以2后的结果 let source=[1,2,2,3,5,9] let double=source.map(i=>i*2) console.log(double); 运行结果： 例2 ：使用列表的方式展示数据（封...
react系列（2）表达式及样式语法
@黄小泽的个人博客
11-25 2260
React表达式用两个大括号{ }表示。简单来说，就是在元素标签中{ }里的js脚本可以被执行，有点类似于jsp的&lt;%= %&gt;。在表达式中不建议有太多逻辑实现，主要目的是为了可以返回一个可被渲染对象、内部方法函数、props或state，如标签元素，这类用法在本章做个简单了解即可。所以当你在React中看到以下写法： &lt;div&gt;{some code}&lt;/div&g...
React基础语法
weixin_44763882的博客
04-06 852
1.认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢？ 我们在 JS 中不能给一个变量赋值为HTML元素 如果将 type="text/babel"去掉, 会语法报错, 其实它是一段 jsx 的语法 JSX是什么? JSX是一种JavaScript的语法扩展(eXtension), 也在很多地方称之为JavaScript XML 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用 它不同于Vue中的模块语法, 你不需要专门学习模块语法中的一些指令 (.
react+ts+antd cron表达式组件
最新发布
11-16
3. 验证逻辑：Cron表达式需要符合特定的格式，组件内可能包含验证函数来确保输入的有效性。 4. 用户交互：组件可能有交互式的元素，如下拉菜单、输入框等，让用户选择或输入值。 5. 状态管理：使用React的状态管理和...
将 Jade 模板编译为 React.DOM 表达式
06-08
jade-react 将 Jade 模板编译为 React 脱糖 JSX。 .container-fluid.readme .row h1= this.storeName ul 每个产品在 this.products li | product = product.title into function () { function map (obj, fn) { if ...
react-cron:react的cron表达式生成器，定时
05-31
react-crons Usage demo:https://chensongtao.github.io/react-cron/src-index 组件依赖 "react": "16.x", "antd": "^3.20.1", "classnames": "^2.2.6", style依赖 less 引入 @import '~antd/dist/antd.less' ...
react v6路由钩子函数
12-12
在React V6中，路由钩子函数是React Router库的核心组成部分，它们允许我们在组件中轻松地与路由系统交互。React Router V6引入了一些新的API，这些API以React的钩子形式提供，使得在函数组件中处理路由变得简单而...
react生命周期函数图解
10-09
React中重要的部分就是生命周期函数。与其他框架不同，React的生命周期函数不同阶段支持不同的状态和属性变化，从而进行重新渲染。不同周期执行不同的函数对于整个开发过程很重要。
react 箭头表达式
fwk19840301的博客
05-02 2205
基本用法ES6 允许使用“箭头”（=&gt;）定义函数。var f = v =&gt; v; // 等同于 var f = function (v) { return v; }; 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。var f = () =&gt; 5; // 等同于 var f = function () { return 5 }; var sum = (...
React 样式：内联样式表达式
m0_37068028的博客
09-03 1万+
1. 定义stateminiHeader: false2. 定义事件switchHeader() { this.setState({ miniHeader: !this.state.miniHeader }) }3. 触发事件onClick={this.switchHeader.bind(this)}4. 样式切换 const styleComponentHeader = { hea
你不知道的JavaScript——do表达式和eval（）
web分享客的博客
09-23 2039
ES7 规范有一项“do 表达式”（do expression）提案，但是具体的用例和语法还没有广泛使用，所以这里只作提及，类似下面这样： var a, b; a = do { if (true) { b = 4 + 38; } }; a; // 42 上例中，do { .. } 表达式执行一个代码块（包含一个或多个语句），并且返回其中最后一 个语句的结果值，然后赋值给变...
Es6 之 do表达式
前端一线搬运工的博客
07-19 1539
如let a 在一个对象中 let a = { let b = 1 } a获取不到b的值,因为块级作用域不返回值 let a = do { let b = 1 } 现在一个提案在块级作用域前加do,即可得到返回值 截止目前测试还未成功,估计是提案浏览器还没跟上,了解即可 ...
do{}表达式的详细介绍【与实战结合】
热门推荐
吴小迪的博客
11-04 2万+
do{}表达式是ES6的最新提案。截止目前测试还未成功,估计是提案浏览器还没跟上,如果朋友们想要项目中使用就需要引入babeljs进行编译。 接下来我们一起来看一下用了这个 do{} 表达式究竟有哪些好处。它的用法是如何的。 do{}的用法 const test = do { let a = 2; let b = 4; a * b + 1; } console.log(test) //9 ...
React 函数讲解
A_bad_horse的专栏
04-16 1710
学习目标 纯函数 React函数三种写法 React事件处理 纯函数 首先得是一个函数。 当给定相同的输入（函数的参数）的时候，总是有相同的输出（返回值）。 没有副作用。 不依赖于函数外部状态。 当一个函数满足以上条件时，该函数可以称为是纯函数。 // 非纯函数let payload = 0; function addOne(number) { ...
react-表达式-函数式组件-规则-构造器方法-类组件-事件-挂载组件
weixin_47818467的博客
06-29 262
规则
react 函数式组件
让优秀成为一种习惯
09-14 4099
函数式组件即是用函数的方式来声明组件，其特点在于组件可以直接写在页面内**无需再起一个新的页面**，同时**只需要一个return()**，不需要在组件中使用render()。 正常的组件都会在class（`class MainTable extends React.Component {}`）中声明，有render且需要return。 本篇将会讲述两种 函数式定义的组件。两种方式，写法略有不同，但是理念是一致的。
react三元表达式
08-29
React中的三元表达式是一种条件渲染的方式。它可以根据条件来决定渲染哪个组件或者内容。 在React中，可以使用以下语法来编写三元表达式： ```jsx condition ? trueExpression : falseExpression ``` 其中，`condition` 是一个布尔值的表达式，如果为真，则返回 `trueExpression`，否则返回 `falseExpression`。 下面是一个使用三元表达式的示例： ```jsx function Greeting(props) { const isLoggedIn = props.isLoggedIn; return ( <div> <h1>Hello, {isLoggedIn ? 'User' : 'Guest'}</h1> {isLoggedIn && <p>Welcome back!</p>} </div> ); } ``` 在上述示例中，根据 `isLoggedIn` 的值，决定渲染 "User" 或 "Guest"。同时，如果 `isLoggedIn` 为真，则还会渲染 "Welcome back!"。 请注意，三元表达式只能用于内联条件渲染，不能用于多个条件的判断。如果需要多个条件判断，可以考虑使用 `if` 语句或者 `switch` 语句。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值