JS框架-React.js - 爱码网

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

<div >
      ReactDOM.render(
      <div>
         <h1>{1+1}</h1>
        </div>
      ,
      document.getElementById('example')
      );
    </script>

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

React 组件

JS框架-React.js

React.createClass 方法用于生成一个组件类 HelloMessage。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象

JS框架-React.js

React State(状态)

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

如onClick 等事件，与原生 HTML 不同，on 之后第一个字母是大写的！

比如本章实例中，如果将 onClick={this.handleClick} 换成 onclick={this.handleClick} 则点击事件不再生效。