這次帶給大家React中元件渲染使用詳解，React中元件渲染使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
很多情況下元件是動態渲染的，例如登入狀態，如果已登入則顯示登出登錄，否則顯示登入
import React from 'react'
let Login = (props) => {
return <input type="button" value="login" onClick={props.click}/>;
}
let Logout = (props) => {
return <input type="button" value="logout" onClick={props.click}/>;
}
export default class CP extends React.Component{
state = {
status: 0
}
login(){
this.setState({status: 1})
}
logout(){
this.setState({status: 0})
}
render(){
let button = null;
if(this.state.status == 0){
button = <Login click={this.login.bind(this)}/>
} else {
button = <Logout click={this.logout.bind(this)} />
}
return <p>{button}</p>
}
}效果預覽
React 沒有指令，所以在清單渲染時得借助陣列來完成。
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
let lis = [<li key="Javascript">Javascript</li>, <li key="Vue">Vue</li>, <li key="React">React</li>]
return (
<p>
<ul>
{lis}
</ul>
</p>
)
}
ReactDOM.render(
<Component1 />
document.getElementById('app')
)import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
let data = ['Javascript', 'Vue', 'React']
let lis = [];
for(let frm of frms){
lis.push(<li key={frm}>{frm}</li>)
}
return (
<p>
<ul>
{lis}
</ul>
</p>
)
}
ReactDOM.render(
<Component1 />
document.getElementById('app')
)import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
let data = ['Javascript', 'Vue', 'React']
let lis = data.map((frm) => {
return <li key={frm}>{frm}</li>
});
return (
<p>
<ul>
{lis}
</ul>
</p>
)
}
ReactDOM.render(
<Component1 />
document.getElementById('app')
)import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component {
constructor(props){
super(props)
}
static defaultProps = {
students: [
{id: 1, name: 'Tom', age: 18, gender: 1},
{id: 2, name: 'Sam', age: 22, gender: 1},
{id: 3, name: 'Lucy', age: 20, gender: 0}
]
}
getKeys(item = {}){
return Object.keys(item)
}
render(){
return (
<table>
<thead>
<tr>
{
this.getKeys(this.props.students[0]).map((key) => {
return <th key={key}>{key}</th>
})
}
</tr>
</thead>
<tbody>
{
this.props.students.map((obj) => {
return (
<tr key={obj.id}>
{
this.getKeys(obj).map((key, idx) => {
return <td key={key + idx}>{obj[key]}</td>
})
}
</tr>
)
})
}
</tbody>
</table>
)
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)因為React 是虛擬DOM 到真實DOM 的一個過程，而DOM 本身就是一個對象，對象預設沒有唯一標識，所以需要手動指定。
鍵(Keys) 幫助 React 標識哪個項目被修改、新增或移除了。數組中的每一個元素都應該有一個唯一不變的鍵(Keys)來識別。
鍵(Keys)用到列表渲染中，同儕元素中必須是唯一的。
因為元件的呼叫是將元件當成 DOM 節點使用，所以元件裡面可以包含子節點。 React 對元件的子節點透過this.props.children 來獲取，通常this.props.children會有以下幾種情況
如果目前元件沒有子節點，它就是undefined
如果有子節點，資料型別是object
如果有多個子節點，資料型別就是array
為了解決這個資料型別不一致導致在使用的過程中要不斷判斷的情況，React 提供了一個方法 Reacth.Children來處理該屬性。
var Component1 = React.createClass({
render: function(){
return (
<p>
{
React.Children.map(this.props.children, function(childNode){
return <li>{childNode}</li>
})
}
</p>
);
}
})
ReactDOM.render(
<Component1>
<span>Tom</span>
<span>Sam</span>
</Component1>, document.getElementById('p1'));我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是React中元件渲染使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
