<p><code></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>样式测试</title><br /> <!-- react.js 是React的核心库 --><br /> <script src=&quot;./build/react.js charset=&quot;utf-8&quot;></script><br /> <!-- react-dom.js是作用是提供与DOM相关的功能 --><br /> <script src=&quot;./build/react-dom.js&quot; charset=&quot;utf-8&quot;></script><br /> <!-- browser.min.js 的作用是将JSCX语法转换成Javascript的语法 --><br /> <script src=&quot;./build/browser.min.js&quot; charset=&quot;utf-8&quot;></script><br /> <!-- 还可以直接通过网址引入browser.min.js文件 --><br /> <!-- 比如:<script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js&quot; charset=&quot;utf-8&quot;></script> --></p> <style> .pStyle { font-size:30px; } .color{ color:#f00; background:#f00; font-size:50px; } </style> <p></head><br /> <body><br /> <!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 --></p> <div id=&quot;container&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>样式测试<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-comment">&lt;!-- react.js 是React的核心库 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/react.js charset="</span><span class="hljs-attr">utf-8</span>"&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- react-dom.js是作用是提供与<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>相关的功能 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/react-dom.js"</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- browser.min.js 的作用是将JSCX语法转换成Javascript的语法 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/browser.min.js"</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- 还可以直接通过网址引入browser.min.js文件 --&gt;</span> <span class="hljs-comment">&lt;!-- 比如:&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-core/5.8.24/browser.min.js" charset="utf-8"&gt;&lt;/script&gt; --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.pStyle</span> { <span class="hljs-attribute">font-size</span>:<span class="hljs-number">30px</span>; } <span class="hljs-selector-class">.color</span>{ <span class="hljs-attribute">color</span>:<span class="hljs-number">#f00</span>; <span class="hljs-attribute">background</span>:<span class="hljs-number">#f00</span>; <span class="hljs-attribute">font-size</span>:<span class="hljs-number">50px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-comment">&lt;!-- React渲染的模板内容会插入到这个DOM节点中,作为一个容器 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"container"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </code></pre> <hr> <p>**&lt;!-- 在<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>开发中,使用<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>,跟Javascript不兼容,在使用<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>的地方,要设置type:text/<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a> --&gt;<br />&lt;!-- <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>是一个转换编译器,把ES6转成可以在浏览器中运行的代码 --&gt;<br />设置组件样式,讲解三种:<br />1、内联样式<br />2、对象样式、<br />3、选择器样式</p> <p>注意:在React和<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5中设置样式时的书写格式是有区别的</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="1、HTML5以;结尾** React以,结尾 2、HTML5中key、value都不加引号** React中属于Javascript对象,key的名字不能出现&quot;-&quot;,需要使用驼峰命名法。 如果value为字符串,需要加引号。 3、HTML5中,value如果是数字,需要带单位** React中不需要带单位 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code><span class="hljs-number">1</span>、<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>5以;结尾** React以,结尾 <span class="hljs-number">2</span>、HTML5中key、<span class="hljs-keyword">value</span>都不加引号** React中属于Javascript对象,key的名字不能出现<span class="hljs-string">"-"</span>,需要使用驼峰命名法。 如果<span class="hljs-keyword">value</span>为字符串,需要加引号。 <span class="hljs-number">3</span>、HTML5中,<span class="hljs-keyword">value</span>如果是数字,需要带单位** React中不需要带单位 </code></pre> <p>我们定义一个组件类,同时使用三种设置组件样式的方式</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="需求:定义一个组件,分为上下两行显示内容 <div> 内联样式:设置背景颜色、边框大小、边框颜色</p> <h1></h1> <p> 对象样式:设置背景颜色、字体颜色</p> <p> 选择器样式:设置字体大小<br /> <span></span> 动态添加样式(动态添加选择器样式) </div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>需求:定义一个组件,分为上下两行显示内容 <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> 内联样式:设置背景颜色、边框大小、边框颜色 <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> 对象样式:设置背景颜色、字体颜色 <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> 选择器样式:设置字体大小 <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> 动态添加样式(动态添加选择器样式) <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </code></pre> <p>注意:在React中使用选择器设置组件样式时,属性名不能使用class,需要使用className替换</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="(因为class在React中是一个关键字) 类似的:使用htmlFor替换for **如果需要动态添加样式可以在setState里面修改** " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>(因为<span class="hljs-class"><span class="hljs-keyword">class</span><span class="hljs-title">在React中是一个关键字)</span></span> 类似的:使用htmlFor替换<span class="hljs-keyword">for</span> **如果需要动态添加样式可以在<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>里面修改** </code></pre> <hr> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <script type=&quot;text/babel&quot;> var hStyle = { backgroundColor: &quot;green&quot;, color: &quot;red&quot; } var ShowMessage = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({ getInitial<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>:function(){ return {color:&quot;&quot;} }, mouseover:function(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>({add<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>:&quot;color&quot;}) }, render: function() { return ( // 注意;这里的backgroundColor,中间不能加“-”</p> <div style={{backgroundColor:&quot;#ccc&quot;, borderWidth:5, borderColor:&quot;brack&quot;, broderStyle:&quot;solid&quot;}}> <p className=&quot;pStyle&quot;>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.title}</p> <h1 style={hStyle}>{<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.name}</h1> <p> <span className={this.state.addClass} onMouseOver={this.mouseover}>测试鼠标滑过效果</span> </div> <p> ); } }); React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render( <ShowMessage name=&quot;鹏鹏&quot; title=&quot;名字&quot; ></ShowMessage>, document.getElementById(&quot;container&quot;) );</p> <p> </script></p> <p></body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> hStyle = { backgroundColor: <span class="hljs-string">"green"</span>, color: <span class="hljs-string">"red"</span> } <span class="hljs-keyword">var</span> ShowMessage = React.create<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>({ getInitial<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> {color:<span class="hljs-string">""</span>} }, mouseover:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">this</span>.setState({addClass:<span class="hljs-string">"color"</span>}) }, render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> ( <span class="hljs-comment">// 注意;这里的backgroundColor,中间不能加“-”</span> &lt;div style={{backgroundColor:<span class="hljs-string">"#ccc"</span>, borderWidth:<span class="hljs-number">5</span>, borderColor:<span class="hljs-string">"brack"</span>, broderStyle:<span class="hljs-string">"solid"</span>}}&gt; &lt;p className=<span class="hljs-string">"pStyle"</span>&gt;{<span class="hljs-keyword">this</span>.props.title}&lt;/p&gt; &lt;h1 style={hStyle}&gt;{<span class="hljs-keyword">this</span>.props.name}&lt;/h1&gt; &lt;span className={<span class="hljs-keyword">this</span>.state.addClass} onMouseOver={<span class="hljs-keyword">this</span>.mouseover}&gt;测试鼠标滑过效果&lt;/span&gt; &lt;/div&gt; ); } }); ReactDOM.render( &lt;ShowMessage name=<span class="hljs-string">"鹏鹏"</span> title=<span class="hljs-string">"名字"</span> /&gt;, document.getElementById(<span class="hljs-string">"container"</span>) ); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/react/react_42197.html