jsx | 易学教程

在vue中使用jsx语法

阅读更多关于在vue中使用jsx语法

什么是JSX? JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析. 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,废话不多说,先来用代码来看下两者的区别吧. ps: vue中大部分场景是不需要用render函数的,还是用模板更简洁直观 . 使用template // item.vue <template> <div> <h1 v-if="id===1"> <slot></slot> </h1> <h2 v-if="id===2"> <slot></slot> </h2> <h3 v-if="id===3"> <slot></slot> </h3> <h4 v-if="id===4"> <slot></slot> </h4> </div> </template> <script> export default { name: "item", props:{ id:{ type:Number, default:1 } } } </script> 复制代码 item组件中就是接收父组件传过来的id值来显示不同的h标签,v

Vue 中的 Render 全面详解 (渲染函数 & JSX)

阅读更多关于 Vue 中的 Render 全面详解 (渲染函数 & JSX)

相信大家都或多或少的在 code 中见过或使用过 Render，如果你对它还是一脸懵逼，那就快上车！今天就带你来盘它。 @[toc] 一、Render 的资料简介 Render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。简单的说，在 Vue 中我们使用模板 HTML 语法组建页面的，使用 Render 函数我们可以用 Js 语言来构建 DOM。因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转译成 VNode 的函数，而用 Render 函数构建 DOM，Vue 就免去了转译的过程。二、与 Render 的初次相遇你第一次邂逅它的时候，它可能是这样的： IView render:(h, params)=>{ return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方') } Element <el-table-column :render

React Native - Image Require Module using Dynamic Names

阅读更多关于 React Native - Image Require Module using Dynamic Names

问题 I\'m currently building a test app using React Native. The Image module, thus far has been working fine. For example, if I had an image named avatar , the below code snippet works fine. <Image source={require(\'image!avatar\')} /> But but if I change it to a dynamic string, I get <Image source={require(\'image!\' + \'avatar\')} /> I get the error: Requiring unknown module \"image!avatar\". If you are sure the module is there, try restarting the packager. Obviously this is a contrived example,

Render HTML string as real HTML in a React component

阅读更多关于 Render HTML string as real HTML in a React component

问题 Here\'s what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: \"<h1>Hi there!</h1>\" }} /> This doesn\'t: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just a normal string of HTML content. However it\'s rendered as a string, not as HTML for some reason. Any suggestions? 回答1: Check if the text you're trying to append to the node is no escaped like this: var prop = { match: { description: '<h1>Hi there!<

React - User-Defined JSX Components Not rendering

阅读更多关于 React - User-Defined JSX Components Not rendering

问题 I\'ve been trying to make an AJAX call and then add it to my view after it has been retrieved. Nothing really happens with the current code. const View = () => ( <div> <h1>Reports</h1> <statisticsPage /> </div> ); export default View; var statisticsPage = React.createClass({ getInitialState: function() { return {info: \"loading ... \"}; }, componentDidMount: function() { this.requestStatistics(1); }, render: function() { return ( <div>info: {this.state.info}</div> ); }, requestStatistics

Applying className/onClick/onChange not working on Custom React Component

阅读更多关于 Applying className/onClick/onChange not working on Custom React Component

问题 I\'m almost new to react . I\'m trying to create a simple editing and creating mask. Here is the code: import React, { Component } from \'react\'; import Company from \'./Company\'; class CompanyList extends Component { constructor(props) { super(props); this.state = { search: \'\', companies: props.companies }; } updateSearch(event) { this.setState({ search: event.target.value.substr(0,20) }) } addCompany(event) { event.preventDefault(); let nummer = this.refs.nummer.value; let bezeichnung =

React Native - Image Require Module using Dynamic Names

阅读更多关于 React Native - Image Require Module using Dynamic Names

I'm currently building a test app using React Native. The Image module, thus far has been working fine. For example, if I had an image named avatar , the below code snippet works fine. <Image source={require('image!avatar')} /> But but if I change it to a dynamic string, I get <Image source={require('image!' + 'avatar')} /> I get the error: Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager. Obviously this is a contrived example, but dynamic image names are important. Does React Native not support dynamic image names? This is covered in

Why shouldn't JSX props use arrow functions or bind?

阅读更多关于 Why shouldn't JSX props use arrow functions or bind?

问题 I\'m running lint with my React app, and I receive this error: error JSX props should not use arrow functions react/jsx-no-bind And this is where I\'m running the arrow function (inside onClick ): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: \'absolute\', zIndex: 99, padding: 5, backgroundColor: \'rgba(255, 255, 255, 0.72)\'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile

Applying className/onClick/onChange not working on Custom React Component

阅读更多关于 Applying className/onClick/onChange not working on Custom React Component

I'm almost new to react . I'm trying to create a simple editing and creating mask. Here is the code: import React, { Component } from 'react'; import Company from './Company'; class CompanyList extends Component { constructor(props) { super(props); this.state = { search: '', companies: props.companies }; } updateSearch(event) { this.setState({ search: event.target.value.substr(0,20) }) } addCompany(event) { event.preventDefault(); let nummer = this.refs.nummer.value; let bezeichnung = this.refs.bezeichnung.value; let id = Math.floor((Math.random()*100) + 1); $.ajax({ type: "POST", context:this

React学习笔记(一) 入门

阅读更多关于 React学习笔记(一) 入门

1、安装刚开始的时候，我们还是直接通过 CDN 引入就好，这样可以帮助我们更快速地体验 React 开发环境 < script src = "https://unpkg.com/react@16/umd/react.development.js" > < / script > < script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js" > < / script > 生产环境 < script src = "https://unpkg.com/react@16/umd/react.production.min.js" > < / script > < script src = "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" > < / script > 2、入门我们还是先从一个 Hello World 的例子开始，创建一个 html 文件，并在文件中输入如下代码： <!DOCTYPE html> <html> <head> <title>Demo</title> <script src="https://unpkg.com/react@16/umd/react.development.js"><