jsx | 易学教程

React高级指引

阅读更多关于 React高级指引

目录 Fragments 严格模式无障碍辅助功能代码分割错误边界高阶组件深入 JSX Optimizing Performance Portals Render Props Context Fragments <React.Fragment>类似于vue 中的 <template> ，用来对子组件进行分组等操作，有时，语义化的 HTML 会被破坏。比如当在 JSX 中使用 <div> 元素来实现 React 代码功能的时候，又或是在使用列表（ <ol> ， <ul> 和 <dl> ）和 HTML <table> 时。在这种情况下，我们应该使用 React Fragments 来组合各个组件。将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表： function Glossary(props) { return ( <dl> {props.items.map(item => ( // 没有`key`，React 会发出一个关键警告 <React.Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </React.Fragment> ))} </dl> ); } 引出 HTML 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表

React之特点及常见用法

阅读更多关于 React之特点及常见用法

1、什么是React？　　React是一个用于构建用户界面的JavaScript库。主要用于构建UI，很多人认为Reatc是MVC中的V（视图）。　　React起源于Facebook的内部项目，用来架构Instrgram的网站（ins，一款图片分享的社交软件），并与2013年5月份开源。　　React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 2、React的特点？　　（1）声明式设计　　（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。　　（3）灵活：可以与已知的框架或库很好的配合。　　（4）JSX：是js语法的扩展，不一定使用，但建议用。　　（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。　　（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。 3、React的html的必备模板　　<!DOCTYPE html> 　　<html> 　　 <head> 　　<script src="react.js"></script> 　　<script src="react-dom.js"></script> 　　<script src="browser.min.js"></script> 　　</head> 　　 <body> 　　

Cannot update during an existing state transition error in React

阅读更多关于 Cannot update during an existing state transition error in React

问题 Inside my render return() I have these: <button onClick={ this.selectTimeframe('Today') } className={ this.setActiveIf('Today') } type="button">Today</button> Which is this function: selectTimeframe(timeframe) { // this.setState({ timeframe }); } ^ I have to comment out the setState for now otherwise I'll get that error I posted above and the app breaks. I have this in my constructor: this.selectTimeframe = this.selectTimeframe.bind(this); I found this answer here, but it does not make sense,

How to make dynamic state for multiple fields in react?

阅读更多关于 How to make dynamic state for multiple fields in react?

问题 class Bills extends Component { constructor(props) { super(props) this.state = { productName: '', price: 0, quantity: 0, noOfProductsField: 0 } } handleChange = name => event => { this.setState({ [name]: event.target.value, }); }; createFields = () => { const { classes } = this.props; let children = [] for (let i = 0; i < this.state.noOfProductsField; i++) { children.push( <div> <Select className={classes.textField} value = { this.state[i] } onChange={this.handleChange('productName')}

Using express and es6 to render react and jsx server side

阅读更多关于 Using express and es6 to render react and jsx server side

问题 I am trying to wire up a minimum proof-of-concept to render a single React component server-side. When I run my app, I get an error: SyntaxError: express.js: Unexpected token (10:41) And the offending line is: > 10 | res.send(ReactDOMServer.renderToString(<Component msg={msg} />)); | ^ This is my package.json : { "name": "ssrReact", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "start": "nodemon express.js --exec babel-node --presets es2015,stage-2" }, "dependencies":

Center Image React Native Loading Screen

阅读更多关于 Center Image React Native Loading Screen

问题 Background I have an image placed on a screen meant to show when the screen loads other content. I want to center the image so it is always center on all devices. Problem Currently the image shows up top center. I would like it to be aligned vertically as well. Also to be sure that it will always look the same on all devices. Question What is the solution to make sure the image is always centered and the right size for all devices? Example, My current code, In Photoshop Image is 300

How to iterate nested objects and render inside jsx?

阅读更多关于 How to iterate nested objects and render inside jsx?

问题 How can I render a nested map inside my jsx component? I need to do the equivalent of a javascript for(key in groupItem){} See below. class MyComponent extends React.Component { render () { var options = this.props.options; return ( <div> {options.map(function(groupItem, key){ return ( /* Unexpected Token if using groupItem.map? {groupItem.map(function(){return })} */ )})} </div> ) } } Dropdown.defaultProps = { options:[{ 'groupX':{ 'apple':'lovely green apple', 'orange':'juicy orange',

How to loop through object in JSX using React.js

阅读更多关于 How to loop through object in JSX using React.js

问题 So I have a React.js component, and I want to loop through an object I import to add HTML options to it. Here is what I tried, which is both ugly and does not work: import React from 'react'; import AccountTypes from '../data/AccountType'; const AccountTypeSelect = (props) => { return ( <select id={props.id} className = {props.classString} style={props.styleObject}> <option value="nothingSelected" defaultValue>--Select--</option> { $.each(AccountTypes, function(index) { <option val={this.id}

How to use function inside JSX

阅读更多关于 How to use function inside JSX

问题 I am currently reading React offial website, where I came across this question. React official website states that we can use function code inside JSX. Hence, I tried following code, but it's not working. class ABCD extends React.Component { render() { return ( <div> <p> {() => <div>Hello World </div>} </p> </div> ); } } I know, I know, some of you might say see example given on React website. I saw it, the example given on official website involves outside function. I just want to know that

关于 react 中 jsx 深入了解

阅读更多关于关于 react 中 jsx 深入了解

原始javascript 模板插入要将html 代码的内容转化为字符串，其中若遇到一些特殊字符则需要进行转义，例如" 要变成 \" ,而且这样做代码可读性差，所以这种方法并不适合生产开发。jsx 的出现就解决了以上问题，react 中用jsx 直接返回 html 代码，也能在浏览器上显示出来，那么jsx 到底是什么？ jsx 是fackbook为react框架开发的一个语法糖，其中x为xml, 其实它本质还是会被解析成js,因为只有这样浏览器才能识别出来，之所以要写成jsx是为了代码的可读性和可维护性。下面来看看react 官网jsx 的写法 1 var Hello = React.createClass({ 2 render: function() { 3 return <div>Hello {this.props.name}</div>; 4 } 5 }); 6 7 ReactDOM.render( 8 <Hello name="World" />, 9 document.getElementById('container') 10 ); 可以看到代码第三行直接return 一行 html 标签，这在原始javascript 并不可行，实际上它非jsx写法是以下样子： 1 var Hello = React.createClass({ 2 displayName: