React.js 官网资料摘记：JSX简介

来源：互联网发布：软件游戏猎手下载编辑：程序博客网时间：2024/05/17 04:52

关于这一部分，建议配合慕课网的课程一起看，他讲的蛮好的。

React 官网资料文档摘记

给一个最简单的使用本地开发环境进行尝试的文档：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>  </head>  <body>      <!--下面容器的内部就是被渲染的结果-->    <div id="root">        <!---->    </div>    <script type="text/babel">    //在这里面进行代码编写就可以了！    </script>  </body></html>

JSX 简介

基础语法

//直接使用函数进行渲染也是可以的function formateName(user){    return user.firstName+" "+user.lastName;}//或者是常量也可以const user={    firstName:"hello",    lastName:"world"};const element=(    <h1>        {formateName(user)}    </h1>);ReactDOM.render(    element,    document.getElementById("root"));

JSX属性

属性名采用驼峰法命名
属性值为字符串的话可以直接负值，并使用""括起来
为javascript表达式的话需要使用{}括起来

const element=(    <div>        <div className='class_name'>class_name</div>        <div style={{color:'red',fontSize:'24px'}}>style<div>    </div>);

JSX防注入攻击

所有的输入都会解析成字符串形式，所以即使注入代码也不会被运行，这是官网上说的。

//我也不会JSX攻击，所以这里就演示一下，如何读取用户的输入值，并且进行显示class Game extends React.Component{    constructor(){        //等于先实例化父类        super();        this.state={            inputvalue:'请输入你的名字'        };    }    render(){        return (            <div>                <input type='text' onChange={()=>this.handleChange()} ref='inputvalue' />                <button onClick={()=>this.handleClick()}>点击我查看输入</button>            </div>        );    }    //下面定义输入框改变函数    handleChange(event){        var inputDOM=ReactDOM.findDOMNode(this.refs.inputvalue);        this.state.inputvalue=inputDOM.value;    }    //下面定义按钮处理函数    handleClick(){        let inputvalue=this.state.inputvalue;        alert(inputvalue);    }}

这里面用到了几个知识点，介绍一下：

事件绑定：onChange、onClick

直接在Component内部设定处理函数，函数内部实现等会再说。先来看看这些事件是怎么绑定到onClick上去的：
onChange={()=>this.handleChange()}
这里如果写成这样的形式：
onChange={this.handleChange()}
则会直接调用handleChange()函数，而不是触发。并且在这些函数中默认传入event，该参数与javascript的event操作一样。

类似于面向对象编程中的构造函数：constructor

这里的构造函数是constructor，在该构造函数中可以设置一个在该Component内部有效的全局变量：state。

DOM查找

首先是使用refs设置了一个标签，代码中是ref='inputvalue'，之后在外部调用ReactDOM的findDOMNode函数，在该函数内部传入下面形式的调用this.refs.inputvalue，便可以返回该DOM的对象。

注意，这里插两个知识点：

命名变量的时候，最好不要使用下划线和大小写区分，直接全部命名成小写，不知道为什么，那样老是报错。
不要随便嵌套HTML标签，那样也可能报错，毕竟不是真正的HTML标签。

JSX代表Objects

Babel转换器会把JSX转换成一个名为React.createElement()的方法进行调用。

所以下面两段代码的效果是一样的：

const element=(    <h1 className='classname'>        Hello World !    </h1>);

const element=React.createElement(    'h1',    {className:"classname"},    'Hello World');

这样处理结果会返回一个React元素，这些React元素会被React处理成最后显示在页面上的元素。

阅读全文

0 0