首页 > 代码库 > react

react

2024-11-07 18:08:01   203人阅读

一、ReactDom.render()方法是react的最基本的方法，用于将模板转为HTML语言，并插入到指定的DOM节点里。

ReactDom.render(
    <h1>Hello,world!</h1>,
    document.getElementById(‘example‘)   
)

二、JSX语法

上一节代码中，html标签直接写在javascript语言中，不加任何引号，这就是JSX语法，他允许HTML和javascript的混写

var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];
ReactDOM.render(
  <div>
    {
      names.map(function(name){
        return <div>{name}</div>
      })
    }
  </div>,
  document.getElementById("example")
)

上面的代码体现了JSX的基本语法规则：遇到HTML标签（以<开头），就用HTML规则解析，遇到代码块（以{开头），就用javascript语法解析

JSX允许直接在模板中插入javascript变量，如果这个变量是一个数组，则会展开这个数组的所有成员

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById("example")
)

上面代码的arr变量是一个数组，结果JSX把它的所有成员添加到模板，运行结果如下：

技术分享

三、组件

React将代码封装成组件(Component),然后像插入普通html标签一样，在网页中插入这个组件，React.createClass方法就用于生成一个组件类

var HelloMessage = React.createClass({
  render: function(){
    return <h1>Hello,{this.props.name}</h1>
  }
})
ReactDOM.render(
  <HelloMessage name="孙俪"/>,
  document.getElementById("example")
)

上面代码，HelloMessage就是一个组件类，模板插入<HelloMessage />时，会自动生成一个HelloMessage的一个实例，所有组件类都必须有自己的render方法，用于输出组件

注意：组件类的第一个字母必须大写，否则会报错，比如：HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错

 

var HelloMessage = React.createClass({
  render: function(){
    return <h1>Hello,{this.props.name}</h1>
    <p>哈哈</p>
  }
})
ReactDOM.render(
  <HelloMessage name="孙俪"/>,
  document.getElementById("example")
)

 

上面的代码会报错，因为组件类里面包含了两个顶层标签，h1 和 p。

组件的用法和原生的html标签完全一致，可以任意加入属性，比如，<HelloMessage name="Jone">组件加入了一个name属性，值为Jone,组件的属性可以在组件类的this.props对象上获取，比如，name属性就可以通过this.props.name读取。

在给组件类里的元素添加属性的时候，class属性需要写成className,for属性需要写成htmlFor,这是因为class和for都是javascript的保留字

 

react


联系
我们