1、问题背景
利用React访问组件子节点,而子节点是XML构成的
2、实现源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React访问组件子节点</title>
<script type="text/javascript" src="../js/react.js" ></script>
<script type="text/javascript" src="../js/react-dom.js" ></script>
<script type="text/javascript" src="../js/browser.min.js" ></script>
<script type="text/babel">
var Student = React.createClass({
render:function(){
return (
<ul>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ul>
)
}
});
ReactDOM.render(
<Student>
<div>第一季度</div>
<div>第二季度</div>
<div>第三季度</div>
<div>第四季度</div>
</Student>,
document.getElementById("childList")
);
</script>
</head>
<body>
<div id="childList"></div>
</body>
</html>
3、实现结果