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、实现结果
