1.JSX语法 例dome4
遇到HTML标签(以<开头)，就用html解析；
遇到代码块(以[开头)，就用JS解析；
<div id="example"></div>
<script type="text/babel">
var arr=[
<h1>qweqqwe</h1>,
<h2>qweqqwe</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("example")
)
</script>
变量是数组，Jsx会把它的所有成员遍历渲染，添加模板
2.组件 例demo5
React.createClass 方法生成一个组件类
return <h1>hello {this.props.name}</h1>
ReactDOM.render(
< ... name="John" />
document.·····
)
<style>
.red{
color: red;
}
</style>
<div id="example"></div>
<script type="text/babel">
var Header = React.createClass({
render:function(){
return <h1 className={this.props.color}>{this.props.name}节</h1>
}
});
ReactDOM.render(
<Header name="妇女" color="red"/>,
document.getElementById("example")
);
</script>
组件类的第一个字母必须大写 var Header
组件只能包含一个顶层标签 ！！ （再封装个？）
3.this.props.children 例demo5
React.children.map 遍历子节点
<div id="example"></div>
<script type="text/babel">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children,function (child){
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>qwewe</span>
<span>qwe</span>
</NotesList>,
document.getElementById(‘example‘)
);
</script>
4.protypes
方法一：
定义一个变量值
创建一个组件：定义一个属性.定义个render。
ReactDOM.render 属性写入render中.变量值写入属性
document 写入页面
<div id="example"></div>
<script type="text/babel">
var data = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById(‘example‘)
);
</script>
方法二：
创建一个组件：定义一个 render(带有属性的组件)
定义一个带有属性的render数组
申明render.渲染
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById(‘root‘)
);
getDefaultprops 可以用来设置组件属性的默认值