第四節, this.props.children 獲取子元素並插入
阿新 • • 發佈：2019-01-17
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
let NodeList = React.createClass({
render : function(){
return (
<ol>
{
this.props.children.map((child,index) => {return <li key={index}>{child}</li>;})
//this.props.children可以獲取當前元素的子元素,map方法只能在children多於一個的時候，否則報錯
}
</ol>
)
}
});
ReactDOM.render(
<NodeList>
<span>hello</span>
<span>world</span>
</NodeList>, //NodeList中有兩個span元素
document.getElementById('ex1')
);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="ex1"></div>
<script type="text/babel">
let NodeList = React.createClass({
render : function(){
return (
<ol>
{
this.props.children.map((child,index) => {return <li key={index}>{child}</li>;})
//this.props.children可以獲取當前元素的子元素,map方法只能在children多於一個的時候，否則報錯
}
</ol>
)
}
});
ReactDOM.render(
<NodeList>
<span>hello</span>
<span>world</span>
</NodeList>, //NodeList中有兩個span元素
document.getElementById('ex1')
);
</script>
</body>
</html>