React高级指引
深入JSX
本质上来讲,JSX是为React.createElement方法提供的语法糖
- <MyButton color="blue" shadowSize={}>
- Click Me
- </MyButton>
编译为
- React.createElement(
- MyButton,
- {color: 'blue', shadowSize: },
- 'Click Me'
- )
点表示法用于JSX类型
- const MyComponents = {
- DatePicker: function DatePicker(props) {
- return <div>Imagine a {props.color} datepicker here.</div>;
- }
- }
- function BlueDatePicker() {
- return <MyComponents.DatePicker color="blue" />;
- }
JSX的属性
使用JavaScript表达式作为属性
- <MyComponent foo={ + + + } />
字符串常量
- <MyComponent message="hello world" />
- <MyComponent message={'hello world'} />
属性默认为True
- <MyTextBox autocomplete />
- <MyTextBox autocomplete={true} />
展开属性,建议不要使用可能传递不必要的属性给组件
- function App1() {
- return <Greeting firstName="Ben" lastName="Hector" />;
- }
- function App2() {
- const props = {firstName: 'Ben', lastName: 'Hector'};
- return <Greeting {...props} />;
- }
JSX中的子代
字符串子面量
- <MyComponent>Hello world!</MyComponent>
JavaScript表达式
- function Item(props) {
- return <li>{props.message}</li>;
- }
- function TodoList() {
- const todos = ['finish doc', 'submit pr', 'nag dan to review'];
- return (
- <ul>
- {todos.map((message) => <Item key={message} message={message} />)}
- </ul>
- );
- }
布尔,Undefined,Null会被忽略
- <div>
- {showHeader && <Header />}
- <Content />
- </div>
Refs & DOM
创建Refs
- class MyComponent extends React.Component {
- constructor(props) {
- super(props);
- this.myRef = React.createRef();
- }
- render() {
- return <div ref={this.myRef} />;
- }
- }
访问Refs
- const node = this.myRef.current;
为DOM元素添加Ref
- class CustomTextInput extends React.Component {
- constructor(props) {
- super(props);
- // 创建 ref 存储 textInput DOM 元素
- this.textInput = React.createRef();
- this.focusTextInput = this.focusTextInput.bind(this);
- }
- focusTextInput() {
- // 直接使用原生 API 使 text 输入框获得焦点
- // 注意:通过 "current" 取得 DOM 节点
- this.textInput.current.focus();
- }
- render() {
- // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
- return (
- <div>
- <input
- type="text"
- ref={this.textInput} />
- <input
- type="button"
- value="Focus the text input"
- onClick={this.focusTextInput}
- />
- </div>
- );
- }
- }
ref的更新会发生在componentDidMount和componentDidUpdate
为类添加Ref
- class AutoFocusTextInput extends React.Component {
- constructor(props) {
- super(props);
- this.textInput = React.createRef();
- }
- componentDidMount() {
- this.textInput.current.focusTextInput();
- }
- render() {
- return (
- <CustomTextInput ref={this.textInput} />
- );
- }
- }
回调Refs
- class CustomTextInput extends React.Component {
- constructor(props) {
- super(props);
- this.textInput = null;
- this.setTextInputRef = element => {
- this.textInput = element;
- };
- this.focusTextInput = () => {
- // 直接使用原生 API 使 text 输入框获得焦点
- if (this.textInput) this.textInput.focus();
- };
- }
- componentDidMount() {
- // 渲染后文本框自动获得焦点
- this.focusTextInput();
- }
- render() {
- // 使用 `ref` 的回调将 text 输入框的 DOM 节点存储到 React
- // 实例上(比如 this.textInput)
- return (
- <div>
- <input
- type="text"
- ref={this.setTextInputRef}
- />
- <input
- type="button"
- value="Focus the text input"
- onClick={this.focusTextInput}
- />
- </div>
- );
- }
- }
非受控组件
使用ref从DOM 获取表单值
- class NameForm extends React.Component {
- constructor(props) {
- super(props);
- this.handleSubmit = this.handleSubmit.bind(this);
- }
- handleSubmit(event) {
- alert('A name was submitted: ' + this.input.value);
- event.preventDefault();
- }
- render() {
- return (
- <form onSubmit={this.handleSubmit}>
- <label>
- Name:
- <input type="text" ref={(input) => this.input = input} />
- </label>
- <input type="submit" value="Submit" />
- </form>
- );
- }
- }
默认值
- render() {
- return (
- <form onSubmit={this.handleSubmit}>
- <label>
- Name:
- <input
- defaultValue="Bob"
- type="text"
- ref={(input) => this.input = input} />
- </label>
- <input type="submit" value="Submit" />
- </form>
- );
- }
文件输入标签
- class FileInput extends React.Component {
- constructor(props) {
- super(props);
- this.handleSubmit = this.handleSubmit.bind(this);
- }
- handleSubmit(event) {
- event.preventDefault();
- alert(
- `Selected file - ${this.fileInput.files[].name}`
- );
- }
- render() {
- return (
- <form onSubmit={this.handleSubmit}>
- <label>
- Upload file:
- <input
- type="file"
- ref={input => {
- this.fileInput = input;
- }}
- />
- </label>
- <br />
- <button type="submit">Submit</button>
- </form>
- );
- }
- }
- ReactDOM.render(
- <FileInput />,
- document.getElementById('root')
- );
React高级指引的更多相关文章
- React高级指南
高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...
- React 高级指南小记
接上篇,还是笔记,还是干货. 深入 JSX 如果使用 JSX 表达式 <Foo />,Foo 必须在范围内,因为这些标签被编译为对指定变量的直接引用. 由于 JSX 编译为对 React. ...
- React高级特性
目录: 容器组件 JSX可展开属性 动画 : CSS3 Transition 默认属性 复用代码:mixin 容器组件 React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组 ...
- React高级教程(es6)——(1)JSX语法深入理解
从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如: & ...
- [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解
cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...
- (四)React高级内容
1. React developertools安装及使用 2. PropTypes与DefaultProps 讲一下PropTypes, 先拿TodoItem来说: 从几种类型中选: 3 props ...
- React高级
1.React应用 1.1创建应用 创建项目可以使用react脚手架,创建步骤如下 1)安装react脚手架 npm i -g create-react-app 2)创建项目 create-react ...
- 可复用 React 的 HOC 以及的 Render Props
重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...
- 【Web前端Talk】React-loadable 进行代码分割的基本使用
随着项目功能的扩充.版本迭代,我们与Webpack捆绑起来的的项目越来越大,大到开始影响加载速度了.这时我们就该考虑如何对代码进行拆分了. 这次我们一起学习一下如何对React项目中的代码进行Code ...
随机推荐
- 微信小程序生成二维码工具
实现的效果 使用(非自适应) 完整代码请参考网址里https://github.com/tomfriwel/weapp-qrcode 页面wxml中放置绘制二维码的canvas: <canvas ...
- centos vsftpd
1.配置文件 # 是否允许匿名登录FTP服务器,默认设置为YES允许# 用户可使用用户名ftp或anonymous进行ftp登录,口令为用户的E-mail地址.# 如不允许匿名访问则设置为NOanon ...
- mock数据,尽量随机,采用中间表的方式实现
开发平台上的sql不能超过1000行,而为了插入尽可能随机的数据,sql比较长---插入一行数据就需要执行80行sql,因此执行insert into mall_data.dtw_mall2_tmp ...
- web过滤器
Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ht ...
- mac下 改变了ssh连接的端口 git怎么修改
1. 情况是这样的,为了安全起见,我们的服务器ssh连接端口改为了33 sudo vi /etc/ssh/ssh_config port 33 2. 因为git是基于ssh发送数据的,并且git服务 ...
- 【模板】字符串匹配的三种做法(Hash、KMP、STL)
题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 输入输出格式 输入格式: 第一行为一个字符串,即为s1 第二行为一个字符串,即为s2 输出格式: 1行 ...
- Setting
http://www.cnblogs.com/felixwang2/p/8798653.html
- C#编码规范之代码的增删改约定
增加 ,仅增加一行时可以是这样"int a = GetScale(obj, col); // 描述.add by Tome 2018-9-20",多行时见下. #region ad ...
- 18.17 U-Boot+内核移植
18.17.1 移植U-Boot-2012.04.08 1.下载.建立source insight工程.编译.烧写.如果无运行分析原因. $ .tar.bz2 $ cd u-boot- $ make ...
- MVC4 5分页控件,支持Ajax AjaxOption支持
MVC4 5分页控件,支持Ajax AjaxOption支持 /// <summary> /// MVC4 5分页控件,支持Ajax AjaxOption支持 beta 1.0 /// 用 ...