React创建table

来源：互联网发布：php 获取远程图片编辑：程序博客网时间：2024/06/05 22:37
首先引入react相关框架
    <script src="../../build/react.js"></script>   <script src="../../build/react-dom.js"></script>   <script src="../../build/browser.min.js"></script> ```   其次制作个div标签  ``` script  <div id="example" style="text-align-all:center"></div>  ``` 写js代码``` script<script type="text/babel">  var DivInput=React.createClass({        render(){            var value="用户名：";            var style= {                backgroundColor: "blue",                textAlign: "center"            }                return(                    <div style={style}>                        <label>{value}</label>                        <input/>                    </div>                )        }    });    var DivTd=React.createClass({       render(){           var text=["","",""];           return(               <td>{text[0]}</td>           )       }    });    var DivTr=React.createClass({       render(){           var texts=["序号","用户名","密码","密码"];           return(               <tr>                   <td>{texts[0]}</td>                   <td>{texts[1]}</td>                   <td>{texts[2]}</td>               </tr>           )       }    });    var DivTrValues1=React.createClass({        render(){            var textsValues_1=["1","s1","123456"];            var style={                backgroundColor:"blue",                width:"100%",                height:"10px"            };            return(                    <tr style={style}>                        <td>{textsValues_1[0]}</td>                        <td>{textsValues_1[1]}</td>                        <td>{textsValues_1[2]}</td>                    </tr>            )        }    });    var DivTrValues2=React.createClass({        render(){            var textsValues_2=["2","s2","123456"];            var style={                backgroundColor:"blue",                width:"100%",                height:"10px"            };            return(                    <tr style={style}>                        <td>{textsValues_2[0]}</td>                        <td>{textsValues_2[1]}</td>                        <td>{textsValues_2[2]}</td>                    </tr>            )        }    });    var DivTable=React.createClass({       render(){           var style={               backgroundColor:'red'           };           return(               <table style={style}>                   <tbody>                   <DivTr/>                   <DivTrValues1/>                   <DivTrValues2/>                   </tbody>               </table>           )       }    });    var DivForm=React.createClass({       render(){         return(             <form>                 <DivTable/>             </form>         )       }    });    ReactDOM.render(        <DivForm/>,        document.getElementById('example')    )    </script>
这里写图片描述
阅读全文
0 0