React学习：React中render的用法

原文链接：https://www.jianshu.com/p/00226a584eff
React中render的用法：
一个组件类必须要实现一个render方法，这个方法必须要返回一个jsx元素。必须要用一个外层的jsx元素把所有的内容包裹起来，返回并列的多个jsx元素是不合法的。
错误的写法：

render () {
return (
<div>第一个</div>
<div>第二个</div>
)
}

正确的写法：

render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}

在jsx中可以插入Javascript表达式，表达式返回的结果会相应的渲染到页面上面
要求：用{}大括号包裹。

Render（）{
Const word = ‘is good’
Return（
<div>
<h1>react小涛{ word }</h1>
</div>
）
}

用函数表达式来返回：(函数表达式要用括号包裹)

Render（）{
Return（
<div>
<h1>react小涛！{(function(){return ‘is good’})}</h1>
</div>
）
}

{}可以放任何的Javascript代码，render都会把这些代码和返回的内容如实的渲染到页面上。
{}可以用在标签的属性上：

Render（）{
Const className=‘header’
Return（
<div classname={ className }>
<h1>React小涛</h1>
</div>
）
}

直接使用class在react.js的元素上添加类名如

这种方式是不合法的。
还有一个特例是for属性，例如 Male，因为for也是javascript的关键字所以jsx在用htmlfor替代例如Male
条件返回

Render（）{
Const isGoodWord = true
Return（
<div>
<h1>
React 小书
{isGoodWord
? <strong> is good</strong>
: <span> is not good</span>
}
</h1>
</div>
）
}

上面的代码中定义了一个isGoodWord变量为true，下面有个用{}包含的表达式，根据isGoodWord的不同值返回不同的内容。