一、HTML 标签 vs. React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
1、要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));
2、要渲染 React 组件,只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example'));
3、React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
二、
1、在标签内部的注释需要花括号
2、在标签外的的注释不能使用花括号
例:
ReactDOM.render( /*注释 */ <h1>detanx {/*注释*/}</h1>, document.getElementById('example') );
三、JSX中不能使用if else,可以使用三元运算符代替
例:
<h1 style={mystyle}>{1 > 2? 'true':'false'}</h1>
四、react组件
例:
var HelloMessage = React.createClass({ render: function() { return <h1>Hello World!</h1>; } });
ReactDOM.render( <HelloMessage />, document.getElementById('example') );
需要向组件传递参数,可以使用 this.props 对象
例:
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } });
/*方法二
function HelloMessage(props){
return <h1>Hello,{props.name}</h1>;
}*/
ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example') );
通过 getDefaultProps() 方法为 props 设置默认值
var HelloMessage = React.createClass({ getDefaultProps: function() { return { name: 'Runoob' }; }, render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );
name 属性通过 this.props.name 来获取。
注意:在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,
这是因为 class 和 for 是 JavaScript 的保留字。
五、复合组件
例:
var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); ReactDOM.render( <WebSite name="detanx" site=" http://www.baidu.com" />, document.getElementById('example') );
注意:ReactDOM.render(<组建名 />);组件名是用单标签< />即带斜杠"/"的尖括号包围的