<head>
<!-- react core -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<!-- we must add this to use jsx -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style type="text/css">
.buttonRow {
display: flex;
flex-direction: row;
}
.display{
width: 140px;
height: 35px;
font-size: 14pt;
background-color: antiquewhite;
}
button {
width:35px;
height: 35px;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Calculator extends React.Component{
render(){
return(
<div>
<div>
<input type="text" id="display" readonly="readonly" class="display" value="0" />
</div>
<div style={{display:'flex',flexDirection: 'column'}}>//display后跟的是值，所以‘flex’要加''
<div className="buttonRow">
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
</div>
<div className="buttonRow">
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
</div>
<div className="buttonRow">
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button>
</div>
<div className="buttonRow">
<button>0</button>
<button>=</button>
<button>C</button>
<button>/</button>
</div>
</div>
</div>
)
}
}
ReactDOM.render(
<Calculator />,
document.querySelector("#root")
)
</script>
react的CSS样式设置
猜你喜欢
转载自blog.csdn.net/hehepeng123/article/details/88059955
今日推荐
周排行