第一次测试

这个我在网上找到的一个不错的react教程书，叫 《react.js 小书》,看着觉得写得很好便写了自己的第一次react.js

<code>
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class Header extends Component {
render() {
return (
<h1>{this.props.title}</h1>
)
}
}
function renderContent(content){
ReactDOM.render(<Header title={content}/>, document.getElementById('root'))
}
renderContent('我的第一次react测试！！！')
</code>

这里的Header继承 Component ，然后我ReactDOM调用的时候 传入title给Render()这个时候就其实是传入了Component里，所以这里面就需要this.props来抓取父类的属性值。

编写react组件一般都会继承Component，并且一定要实现render()方法。个人感觉这个render()方法就是这个组件的输出相当于你写好了组件所有的功能方法如果没有这个入口或者说出口，你的组件就相当于一个完美 插座但是没有插口。而且render()方法一定是放回一个JSX元素且不能并列返回，类似不能直接返回两个li只能用一个ul来包裹起来。类似：
<code>...
render () {
return (
<div>第一个</div>
<div>第二个</div>
)
}
...
</code>
这里如果返回两个并列标签就错了，只能返回一个大标签。比如：
<code>
...
render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}
...
</code>

表达式

jsx返回还可以支持表达式{anything}来填充文本，大括号里面可以写javascript的所有东西甚至你都可以再里面写一个函数来填充，当然函数要有返回值。
<code>
...
render () {
const isgood =true;
const shuai = <strong>帅</strong>;
const chou = <span>丑</span>;
return (
<div> {isgood? <h1>好</h1>: <h1>差</h1>} {isgood?shuai:chou} <h1 class ={'shuai'}>李森森 {'不要太帅'}</h1> <h1>李森森 {'5'+20}</h1> <h1>李森森 {(function () { return '666'})()}</h1> </div>
)
}
...
</code>