深入JSX

本质上来讲,JSX是为React.createElement方法提供的语法糖

  1. <MyButton color="blue" shadowSize={}>
  2. Click Me
  3. </MyButton>

编译为

  1. React.createElement(
  2. MyButton,
  3. {color: 'blue', shadowSize: },
  4. 'Click Me'
  5. )

点表示法用于JSX类型

  1. const MyComponents = {
  2. DatePicker: function DatePicker(props) {
  3. return <div>Imagine a {props.color} datepicker here.</div>;
  4. }
  5. }
  6.  
  7. function BlueDatePicker() {
  8. return <MyComponents.DatePicker color="blue" />;
  9. }

JSX的属性

使用JavaScript表达式作为属性

  1. <MyComponent foo={ + + + } />

字符串常量

  1. <MyComponent message="hello world" />
  2.  
  3. <MyComponent message={'hello world'} />

属性默认为True

  1. <MyTextBox autocomplete />
  2.  
  3. <MyTextBox autocomplete={true} />

展开属性,建议不要使用可能传递不必要的属性给组件

  1. function App1() {
  2. return <Greeting firstName="Ben" lastName="Hector" />;
  3. }
  4.  
  5. function App2() {
  6. const props = {firstName: 'Ben', lastName: 'Hector'};
  7. return <Greeting {...props} />;
  8. }

JSX中的子代

字符串子面量

  1. <MyComponent>Hello world!</MyComponent>

JavaScript表达式

  1. function Item(props) {
  2. return <li>{props.message}</li>;
  3. }
  4.  
  5. function TodoList() {
  6. const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  7. return (
  8. <ul>
  9. {todos.map((message) => <Item key={message} message={message} />)}
  10. </ul>
  11. );
  12. }

布尔,Undefined,Null会被忽略

  1. <div>
  2. {showHeader && <Header />}
  3. <Content />
  4. </div>

Refs & DOM

创建Refs

  1. class MyComponent extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.myRef = React.createRef();
  5. }
  6. render() {
  7. return <div ref={this.myRef} />;
  8. }
  9. }

访问Refs

  1. const node = this.myRef.current;

为DOM元素添加Ref

  1. class CustomTextInput extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. // 创建 ref 存储 textInput DOM 元素
  5. this.textInput = React.createRef();
  6. this.focusTextInput = this.focusTextInput.bind(this);
  7. }
  8.  
  9. focusTextInput() {
  10. // 直接使用原生 API 使 text 输入框获得焦点
  11. // 注意:通过 "current" 取得 DOM 节点
  12. this.textInput.current.focus();
  13. }
  14.  
  15. render() {
  16. // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
  17. return (
  18. <div>
  19. <input
  20. type="text"
  21. ref={this.textInput} />
  22.  
  23. <input
  24. type="button"
  25. value="Focus the text input"
  26. onClick={this.focusTextInput}
  27. />
  28. </div>
  29. );
  30. }
  31. }

ref的更新会发生在componentDidMount和componentDidUpdate

为类添加Ref

  1. class AutoFocusTextInput extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.textInput = React.createRef();
  5. }
  6.  
  7. componentDidMount() {
  8. this.textInput.current.focusTextInput();
  9. }
  10.  
  11. render() {
  12. return (
  13. <CustomTextInput ref={this.textInput} />
  14. );
  15. }
  16. }

回调Refs

  1. class CustomTextInput extends React.Component {
  2. constructor(props) {
  3. super(props);
  4.  
  5. this.textInput = null;
  6.  
  7. this.setTextInputRef = element => {
  8. this.textInput = element;
  9. };
  10.  
  11. this.focusTextInput = () => {
  12. // 直接使用原生 API 使 text 输入框获得焦点
  13. if (this.textInput) this.textInput.focus();
  14. };
  15. }
  16.  
  17. componentDidMount() {
  18. // 渲染后文本框自动获得焦点
  19. this.focusTextInput();
  20. }
  21.  
  22. render() {
  23. // 使用 `ref` 的回调将 text 输入框的 DOM 节点存储到 React
  24. // 实例上(比如 this.textInput)
  25. return (
  26. <div>
  27. <input
  28. type="text"
  29. ref={this.setTextInputRef}
  30. />
  31. <input
  32. type="button"
  33. value="Focus the text input"
  34. onClick={this.focusTextInput}
  35. />
  36. </div>
  37. );
  38. }
  39. }

非受控组件

使用ref从DOM 获取表单值

  1. class NameForm extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.handleSubmit = this.handleSubmit.bind(this);
  5. }
  6.  
  7. handleSubmit(event) {
  8. alert('A name was submitted: ' + this.input.value);
  9. event.preventDefault();
  10. }
  11.  
  12. render() {
  13. return (
  14. <form onSubmit={this.handleSubmit}>
  15. <label>
  16. Name:
  17. <input type="text" ref={(input) => this.input = input} />
  18. </label>
  19. <input type="submit" value="Submit" />
  20. </form>
  21. );
  22. }
  23. }

默认值

  1. render() {
  2. return (
  3. <form onSubmit={this.handleSubmit}>
  4. <label>
  5. Name:
  6. <input
  7. defaultValue="Bob"
  8. type="text"
  9. ref={(input) => this.input = input} />
  10. </label>
  11. <input type="submit" value="Submit" />
  12. </form>
  13. );
  14. }

文件输入标签

  1. class FileInput extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.handleSubmit = this.handleSubmit.bind(this);
  5. }
  6. handleSubmit(event) {
  7. event.preventDefault();
  8. alert(
  9. `Selected file - ${this.fileInput.files[].name}`
  10. );
  11. }
  12.  
  13. render() {
  14. return (
  15. <form onSubmit={this.handleSubmit}>
  16. <label>
  17. Upload file:
  18. <input
  19. type="file"
  20. ref={input => {
  21. this.fileInput = input;
  22. }}
  23.  
  24. />
  25.  
  26. </label>
  27. <br />
  28. <button type="submit">Submit</button>
  29. </form>
  30. );
  31. }
  32. }
  33.  
  34. ReactDOM.render(
  35. <FileInput />,
  36. document.getElementById('root')
  37. );

React高级指引的更多相关文章

  1. React高级指南

    高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...

  2. React 高级指南小记

    接上篇,还是笔记,还是干货. 深入 JSX 如果使用 JSX 表达式 <Foo />,Foo 必须在范围内,因为这些标签被编译为对指定变量的直接引用. 由于 JSX 编译为对 React. ...

  3. React高级特性

    目录: 容器组件 JSX可展开属性 动画 : CSS3 Transition 默认属性 复用代码:mixin 容器组件 React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组 ...

  4. React高级教程(es6)——(1)JSX语法深入理解

    从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如: & ...

  5. [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解

    cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...

  6. (四)React高级内容

    1. React developertools安装及使用 2. PropTypes与DefaultProps 讲一下PropTypes, 先拿TodoItem来说: 从几种类型中选: 3 props ...

  7. React高级

    1.React应用 1.1创建应用 创建项目可以使用react脚手架,创建步骤如下 1)安装react脚手架 npm i -g create-react-app 2)创建项目 create-react ...

  8. 可复用 React 的 HOC 以及的 Render Props

    重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...

  9. 【Web前端Talk】React-loadable 进行代码分割的基本使用

    随着项目功能的扩充.版本迭代,我们与Webpack捆绑起来的的项目越来越大,大到开始影响加载速度了.这时我们就该考虑如何对代码进行拆分了. 这次我们一起学习一下如何对React项目中的代码进行Code ...

随机推荐

  1. 微信小程序生成二维码工具

    实现的效果 使用(非自适应) 完整代码请参考网址里https://github.com/tomfriwel/weapp-qrcode 页面wxml中放置绘制二维码的canvas: <canvas ...

  2. centos vsftpd

    1.配置文件 # 是否允许匿名登录FTP服务器,默认设置为YES允许# 用户可使用用户名ftp或anonymous进行ftp登录,口令为用户的E-mail地址.# 如不允许匿名访问则设置为NOanon ...

  3. mock数据,尽量随机,采用中间表的方式实现

    开发平台上的sql不能超过1000行,而为了插入尽可能随机的数据,sql比较长---插入一行数据就需要执行80行sql,因此执行insert into mall_data.dtw_mall2_tmp ...

  4. web过滤器

    Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ht ...

  5. mac下 改变了ssh连接的端口 git怎么修改

    1. 情况是这样的,为了安全起见,我们的服务器ssh连接端口改为了33 sudo vi /etc/ssh/ssh_config port  33 2. 因为git是基于ssh发送数据的,并且git服务 ...

  6. 【模板】字符串匹配的三种做法(Hash、KMP、STL)

    题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 输入输出格式 输入格式: 第一行为一个字符串,即为s1 第二行为一个字符串,即为s2 输出格式: 1行 ...

  7. Setting

    http://www.cnblogs.com/felixwang2/p/8798653.html

  8. C#编码规范之代码的增删改约定

    增加 ,仅增加一行时可以是这样"int a = GetScale(obj, col); // 描述.add by Tome 2018-9-20",多行时见下. #region ad ...

  9. 18.17 U-Boot+内核移植

    18.17.1 移植U-Boot-2012.04.08 1.下载.建立source insight工程.编译.烧写.如果无运行分析原因. $ .tar.bz2 $ cd u-boot- $ make ...

  10. MVC4 5分页控件,支持Ajax AjaxOption支持

    MVC4 5分页控件,支持Ajax AjaxOption支持 /// <summary> /// MVC4 5分页控件,支持Ajax AjaxOption支持 beta 1.0 /// 用 ...