ホームページ > 記事 > ウェブフロントエンド > ReactJs で CSS スタイルを設定するサンプルチュートリアルを要約します。
ReactJs で CSS スタイルを設定するサンプルチュートリアルを要約します。
- 零下一度オリジナル
- 2017-06-17 17:25:421082ブラウズ
この記事ではReactJsでCSSスタイルを設定する方法を中心に紹介していますが、編集者がとても良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう
少し前にReact Nativeを見たことがありますが、Androidでの開発はまだ成熟していないように感じました。改善する必要がある機能が多く、途中でいくつかのモジュールで問題が発生しました。実際のアプリケーションのプロセスについては理解していますが、インターネット上であまり多くのリソースを見つけられなかったので、しばらく脇に置いて、ReactJ に戻るつもりです。
React は従来の HTML の考え方を覆しました。コードは基本的に 34b4749191894131594805ab82e8fc432cacc6d41bbb37262a98f745aa00fbf0 タグで記述します。私は開発時に IDEA を使用します。もちろん、IDEA を使用する場合は、設定の言語とフレームワーク Javascript 言語バージョンは JSX Harmony です。それ以外の場合、エディターは正しい構文のエラーを報告する可能性があります。
<script src="../js/react.js"></script> <script src="../js/react-dom.js"></script> <script src="../js/browser.min.js"></script> <script src="../js/jquery-1.7.2.min.js"></script>
上記の最初の 3 つのファイルは、HTML ファイルのヘッダー タグで参照されますただし、jquery の ajax リクエストの方が便利なので、ここでは jquery を引用しました。もちろん、ajax のようなメソッドを自分でカプセル化することも、ネイティブの http リクエストを使用してバックグラウンドと対話することもできます。
今日は主に反応スタイルの設定について話します:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Js</title>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/browser.min.js"></script>
<script src="../js/jquery-1.7.2.min.js"></script>
<style rel="stylesheet">
.hello{
color: #ffffff;width: 200px;height: 30px;border: none;background-color: #00a0e9;line-height: 30px;text-align: center;font-size: 14px;
font-family: "Microsoft YaHei UI";cursor: pointer;
}
.redBack{
background-color: #f00;overflow: hidden;
}
</style>
</head>
<body>
<p id="msg"></p>
</body>
<script type="text/babel">
var colorStyle={
color: '#ffffff',
width: 200,height: 30,border: 'none',backgroundColor: '#00a0e9',textAlign: 'center',fontSize: 14,
fontFamily: "Microsoft YaHei UI",cursor: 'pointer',float:'left',lineHeight:'30px'
};
var Http=React.createClass({
getInitialState: function () {
return{
videoSrc:"../src/demo1.mp4"
}
},
handPost:function () {
// var HTTPrequest=new XMLHttpRequest();
// HTTPrequest.open("GET","/json/city");
// HTTPrequest.send();
// HTTPrequest.onreadystatechange =function () {
// if(HTTPrequest.readyState==4 && HTTPrequest.status==200){
// console.log(JSON.parse(HTTPrequest.responseText));
// }
// }
$.ajax({
type:'GET',
url:'/json/city',
dataType:'json',
success: function (data) {
console.log(data)
}
})
},
render:function () {
return(
<p className="redBack">
<video src={this.state.videoSrc} style={{float:'left',width:300,border:'5px solid #ffffff'}} controls="controls"></video>
<p onClick={this.handPost} style={colorStyle}>点击请求城市资源</p>
</p>
)
}
});
ReactDOM.render(
<Http/>,document.getElementById('msg')
)
</script>
</html>上記のコードに示されているように、スタイルを設定するには 3 つの方法があると思います:
1. 青字の部分に示すように、インライン スタイルを直接指定します
2. JS コードで変数を定義し、要素タグ内の変数を呼び出します (赤色のフォントで示されています)。
3. ラベルの className を設定します (緑色のフォント部分など)。
以上がReactJs で CSS スタイルを設定するサンプルチュートリアルを要約します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。