三个重要概念点
- 组件 return()的返回节点必须是一个，所以有多个节点时，用一个大节点包起
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component{
render(){
return (
<div> #用 div 包起多个节点
<ComponentHeader />
<h2>页面的主体内容</h2>
</div>
);
}
}
- 可以给外部使用的组件要加上
export default
import React from 'react';
import ReactDOM from 'react-dom';
#这个组件要供给 Index 组件使用，所以加上export default
export default class ComponentHeader extends React.Component{
render(){
return (
<header>
<h1>这里是头部</h1>
</header>
);
}
}
- 入口定义：
ReactDOM.render(<Index/>, document.getElementById('example'),输出给 html 的最终入口点
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component{
render(){
return (
<div>
<ComponentHeader />
<h2>页面的主体内容</h2>
</div>
);
}
}
ReactDOM.render(<Index/>, document.getElementById('example'));
多组件嵌套
-组件可以以参数的形式传递
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/BodyIndex';
class Index extends React.Component{
render(){
var component; #这里模拟了用户登录的情况，以判断结果选择不同的组件进行传入。
if(用户已登录) {
component = <ComponentLoginHeader />
}
else {
component = <ComponentHeader />
}
return (
<div>
{component}
<BodyIndex />
<ComponentFooter />
</div>
);
}
}
ReactDOM.render(<Index/>, document.getElementById('example'));
JSX内置表达式(更多去看文档)
- 使用三元表达式进行判断
下例中的：{userName == '' ? ' 用户没有登录' : '用户名： ' + userName}用?判断 boolean 值，用:的前后来执行判断 - 标签属性的表达式
下例中的：<input type='button' value = {userName} disabled={boolInput}></input>,表达式可以不用引号包裹 - 注释的写法
{/* 注释 */}
import React from 'react';
import ReactDOM from 'react-dom';
export default class BodyIndex extends React.Component{
render(){
var userName = "emilesu";
var boolInput = false;
return (
<div>
<h2>这里是主体内容</h2>
<p>{userName == '' ? '用户没有登录' : '用户名: ' + userName }</p>
<p><input type='button' value = {userName} disabled={boolInput}></input></p>
{/*
1.这里是注释
2.这里是注释
3.这里是注释
*/}
</div>
);
}
}
生命周期函数
生命周期函数的作用，是在组件起始过程的不同阶段内，可以通过调用生命周期函数，插入响应不同的动作。
image.png
