react讲义.html

<!DOCTYPE html><html><head><title>React</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    
<h3 id="react">React</h3>

<blockquote>
  <p>React中有两大核心组件：</p>
  
  <ul><li>react：核心库 (React)</li>
  <li>react-dom：提供与DOM相关的功能 (ReactDOM)</li>
  </ul>
  
  <p>npm install react react-dom –save-dev</p>
</blockquote>


<h4 id="1jsx和dom操作">1、JSX和DOM操作</h4>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs livescript"><span class="hljs-comment line-number">1.</span><span class="hljs-pi">//-&gt;在入口中导入CSS,使用WEB-PACK编译部署<br><span class="hljs-comment line-number">2.</span>require('./css/index.css');<br><span class="hljs-comment line-number">3.</span><br><span class="hljs-comment line-number">4.</span>//</span><span class="hljs-function">-&gt;</span>导入需要的模块(ES6语法)<br><span class="hljs-comment line-number">5.</span><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;<br><span class="hljs-comment line-number">6.</span><span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;<br><span class="hljs-comment line-number">7.</span><br><span class="hljs-comment line-number">8.</span><span class="hljs-keyword">let</span> app = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'app'</span>);<br><span class="hljs-comment line-number">9.</span><span class="hljs-keyword">let</span> styleObj = {<span class="hljs-attribute">color</span>: <span class="hljs-string">'red'</span>},<br><span class="hljs-comment line-number">10.</span>    personList = [<span class="hljs-string">'张三'</span>, <span class="hljs-string">'李四'</span>, <span class="hljs-string">'王五'</span>];<br><span class="hljs-comment line-number">11.</span><br><span class="hljs-comment line-number">12.</span>ReactDOM.render(&lt;h1 style={styleObj} className=<span class="hljs-string">"title"</span>&gt;<br><span class="hljs-comment line-number">13.</span>    hello world!<br><span class="hljs-comment line-number">14.</span>    &lt;ul&gt;<br><span class="hljs-comment line-number">15.</span>        {<br><span class="hljs-comment line-number">16.</span>            personList.map((item, index)=&gt; {<br><span class="hljs-comment line-number">17.</span>                <span class="hljs-keyword">return</span> &lt;li key={index}&gt;{item}&lt;<span class="hljs-pi">/li&gt;;/</span>/<span class="hljs-function">-&gt;</span>需要给每一个元素设置唯一标识key，存储的值不相同才可以<br><span class="hljs-comment line-number">18.</span>            })<br><span class="hljs-comment line-number">19.</span>        }<br><span class="hljs-comment line-number">20.</span>    &lt;/ul&gt;<br><span class="hljs-comment line-number">21.</span>&lt;/h1&gt;, app);<br></code></pre>

<blockquote>
  <p>JSX：javascript + xml(html) 它是React独有的语法，我们使用这样的语法创建虚拟的DOM，在最后部署打包的时候，基于babel-loader把ES6-&gt;ES5，把JSX变为HTML</p>
  
  <ul><li>所有看起来像标签，但不是HTML标签的都是虚拟DOM(React元素)</li>
  <li>所有使用 {…}  包起来的都是JS语法</li>
  <li>设置样式有两种方式： <br>
  <ul>
  <li>使用行内style来操作  style={styleObj} 我们需要把样式都使用一个变量提前定义</li>
  <li>使用样式类名来操作  className=”title”</li></ul></li>
  </ul>
  
  <p>当我们执行ReactDOM.render方法的时候，React会按照上面的机制，把虚拟DOM已经我们编写的JS进行解析，然后把结果插入到app容器中，此时原有的虚拟DOM变为了真实的DOM</p>
</blockquote>

<h4 id="2react组件">2、React组件</h4>

<blockquote>
  <p>React的优势就在于组件化的定制，我们可以制定很多的组件，最后一个完整的页面就是由N多个组件组成的，这个也是我们前端工程化开发的意思所在。</p>
</blockquote>

<h5 id="定义组件">定义组件</h5>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scala"><span class="hljs-comment line-number">1.</span><span class="hljs-comment">/*<br><span class="hljs-comment line-number">2.</span>    使用ES6语法定义组件<br><span class="hljs-comment line-number">3.</span><br><span class="hljs-comment line-number">4.</span>    1.使用的是ES6中的继承，React.Component就是React的组件类，我们创建的新的组件是Person，我们让其继承React.Component<br><span class="hljs-comment line-number">5.</span><br><span class="hljs-comment line-number">6.</span>    2.我们自己的定义的组件名，第一个首字母必须大写(React规定)，而且每一个组件有且只能有一个顶级标签<br><span class="hljs-comment line-number">7.</span><br><span class="hljs-comment line-number">8.</span>    3.render是规定的方法，在这个方法中返回我们组件的虚拟DOM即可，而对于constructor以及它的参数，我们后续再介绍<br><span class="hljs-comment line-number">9.</span>*/</span><br><span class="hljs-comment line-number">10.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">11.</span>    constructor(props) {<br><span class="hljs-comment line-number">12.</span>        <span class="hljs-keyword">super</span>(props);<br><span class="hljs-comment line-number">13.</span>    }<br><span class="hljs-comment line-number">14.</span><br><span class="hljs-comment line-number">15.</span>    render() {<br><span class="hljs-comment line-number">16.</span>        <span class="hljs-keyword">return</span> &lt;h1 className=<span class="hljs-string">"title"</span>&gt;<br><span class="hljs-comment line-number">17.</span>            人员名单<br><span class="hljs-comment line-number">18.</span>            &lt;ul&gt;<br><span class="hljs-comment line-number">19.</span>                {<br><span class="hljs-comment line-number">20.</span>                    personList.map((item, index)=&gt; {<br><span class="hljs-comment line-number">21.</span>                        <span class="hljs-keyword">return</span> &lt;li key={index}&gt;{item}&lt;/li&gt;;<br><span class="hljs-comment line-number">22.</span>                    })<br><span class="hljs-comment line-number">23.</span>                }<br><span class="hljs-comment line-number">24.</span>            &lt;/ul&gt;<br><span class="hljs-comment line-number">25.</span>        &lt;/h1&gt;;<br><span class="hljs-comment line-number">26.</span>    }<br><span class="hljs-comment line-number">27.</span>}<br><span class="hljs-comment line-number">28.</span><br><span class="hljs-comment line-number">29.</span><span class="hljs-comment">/*<br><span class="hljs-comment line-number">30.</span>    我们使用ReactDOM.render方法可以把自定义的组件增加到页面指定的容器中，这样虚拟DOM就变为了真实的DOM<br><span class="hljs-comment line-number">31.</span>*/</span><br><span class="hljs-comment line-number">32.</span><span class="hljs-type">ReactDOM</span>.render(&lt;<span class="hljs-type">Person</span>/&gt;, app);<br></code></pre>


<h5 id="组件的属性">组件的属性</h5>

<blockquote>
  <p>属性是一个组件基础信息，在调取组件的时候，由父级组件指定相关的属性值，然后在子组件中，我们只能获取这些属性值，但是不可以修改这些属性值</p>
</blockquote>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scala"><span class="hljs-comment line-number">1.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">2.</span>    <span class="hljs-comment">//-&gt;在构造函数中需要把props这个组件的属性进行继承</span><br><span class="hljs-comment line-number">3.</span>    constructor(props) {<br><span class="hljs-comment line-number">4.</span>        <span class="hljs-keyword">super</span>(props);<br><span class="hljs-comment line-number">5.</span>    }<br><span class="hljs-comment line-number">6.</span><br><span class="hljs-comment line-number">7.</span>    render() {<br><span class="hljs-comment line-number">8.</span>        <span class="hljs-comment">//-&gt;我们可以使用 this.props.<span class="hljs-label">xxx 来获取传递进来的属性值</span></span><br><span class="hljs-comment line-number">9.</span>        <span class="hljs-keyword">return</span> &lt;div&gt;<br><span class="hljs-comment line-number">10.</span>            {<span class="hljs-keyword">this</span>.props.name}&lt;br/&gt;<br><span class="hljs-comment line-number">11.</span>            {<span class="hljs-keyword">this</span>.props.age}&lt;br/&gt;<br><span class="hljs-comment line-number">12.</span>            {<span class="hljs-keyword">this</span>.props.sex}<br><span class="hljs-comment line-number">13.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">14.</span>    }<br><span class="hljs-comment line-number">15.</span>}<br><span class="hljs-comment line-number">16.</span><br><span class="hljs-comment line-number">17.</span><span class="hljs-comment">//-&gt;配置组件属性的默认值或者称之为配置默认属性，在ES5语法中是一个方法：getDefaultProps</span><br><span class="hljs-comment line-number">18.</span><span class="hljs-type">Person</span>.defaultProps = {<br><span class="hljs-comment line-number">19.</span>    name: '--',<br><span class="hljs-comment line-number">20.</span>    age: <span class="hljs-number">25</span>,<br><span class="hljs-comment line-number">21.</span>    sex: <span class="hljs-symbol">'ma</span>n'<br><span class="hljs-comment line-number">22.</span>};<br><span class="hljs-comment line-number">23.</span><br><span class="hljs-comment line-number">24.</span><span class="hljs-comment">//-&gt;在插入组件到页面容器中的时候，我们根据需求把要求的属性填写上：name="张三" age="30" ... 不填写的按照默认值defaultProps处理即可</span><br><span class="hljs-comment line-number">25.</span><span class="hljs-type">ReactDOM</span>.render(&lt;<span class="hljs-type">Person</span> name=<span class="hljs-string">"张三"</span> age=<span class="hljs-string">"30"</span>/&gt;, app);<br></code></pre>

<h5 id="thispropschildren">this.props.children</h5>

<blockquote>
  <p>在父级组件中导入子组件，我们使用双闭合标签语法，可以在展开的块级区域中创建“子元素”，这些内容都会设定在props.children 上，这样我们就可以在组件中使用这些内容了</p>
</blockquote>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scala"><span class="hljs-comment line-number">1.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">2.</span>    constructor(props) {<br><span class="hljs-comment line-number">3.</span>        <span class="hljs-keyword">super</span>(props);<br><span class="hljs-comment line-number">4.</span>    }<br><span class="hljs-comment line-number">5.</span><br><span class="hljs-comment line-number">6.</span>    render() {<br><span class="hljs-comment line-number">7.</span>        <span class="hljs-keyword">return</span> &lt;div&gt;<br><span class="hljs-comment line-number">8.</span>            我的朋友<br><span class="hljs-comment line-number">9.</span>            {<br><span class="hljs-comment line-number">10.</span>                <span class="hljs-type">React</span>.<span class="hljs-type">Children</span>.map(<span class="hljs-keyword">this</span>.props.children, (child)=&gt; {<br><span class="hljs-comment line-number">11.</span>                    <span class="hljs-keyword">return</span> child;<br><span class="hljs-comment line-number">12.</span>                })<br><span class="hljs-comment line-number">13.</span>            }<br><span class="hljs-comment line-number">14.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">15.</span>    }<br><span class="hljs-comment line-number">16.</span>}<br><span class="hljs-comment line-number">17.</span><span class="hljs-type">ReactDOM</span>.render(&lt;<span class="hljs-type">Person</span>&gt;<br><span class="hljs-comment line-number">18.</span>    &lt;span&gt;张三&lt;/span&gt;<br><span class="hljs-comment line-number">19.</span>    &lt;span&gt;李四&lt;/span&gt;<br><span class="hljs-comment line-number">20.</span>    &lt;span&gt;王五&lt;/span&gt;<br><span class="hljs-comment line-number">21.</span>&lt;/<span class="hljs-type">Person</span>&gt;, app);<br></code></pre>

<h5 id="状态">状态</h5>

<blockquote>
  <p>组件的状态就像人的心情，会经常变化，而且只能由自己来改变 <br>
  组件一开始有一个初始状态,然后用户互动,导致状态变化，从而触发界面重新渲染 <br>
  可以给按钮绑定事件，当事件发生的时候调用对应的方法改变组件的状态</p>
</blockquote>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scala"><span class="hljs-comment line-number">1.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">2.</span>    constructor(props) {<br><span class="hljs-comment line-number">3.</span>        <span class="hljs-keyword">super</span>(props);<br><span class="hljs-comment line-number">4.</span>        <span class="hljs-comment">//-&gt;设置默认的状态信息</span><br><span class="hljs-comment line-number">5.</span>        <span class="hljs-keyword">this</span>.state = {<br><span class="hljs-comment line-number">6.</span>            happy: <span class="hljs-literal">true</span><br><span class="hljs-comment line-number">7.</span>        }<br><span class="hljs-comment line-number">8.</span>    }<br><span class="hljs-comment line-number">9.</span><br><span class="hljs-comment line-number">10.</span>    fn(e) {<br><span class="hljs-comment line-number">11.</span>        <span class="hljs-comment">//-&gt;重新设置state值</span><br><span class="hljs-comment line-number">12.</span>        <span class="hljs-keyword">this</span>.setState({<br><span class="hljs-comment line-number">13.</span>            happy: !<span class="hljs-keyword">this</span>.state.happy<br><span class="hljs-comment line-number">14.</span>        });<br><span class="hljs-comment line-number">15.</span>    }<br><span class="hljs-comment line-number">16.</span><br><span class="hljs-comment line-number">17.</span>    render() {<br><span class="hljs-comment line-number">18.</span>        <span class="hljs-keyword">var</span> happyState = <span class="hljs-keyword">this</span>.state.happy ? <span class="hljs-symbol">'goo</span>d' : <span class="hljs-symbol">'ba</span>d';<br><span class="hljs-comment line-number">19.</span>        <span class="hljs-keyword">return</span> &lt;div&gt;<br><span class="hljs-comment line-number">20.</span>            today is {happyState} day!<br><span class="hljs-comment line-number">21.</span>            &lt;input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"button"</span> value=<span class="hljs-string">"change"</span> onClick={<span class="hljs-keyword">this</span>.fn.bind(<span class="hljs-keyword">this</span>)}/&gt;<br><span class="hljs-comment line-number">22.</span>            <span class="hljs-comment">//-&gt;ES6中的一个坑：一定要重新的bind(this)，这样在方法中的this才代表这个组件，否则代表的是当前点击的这个元素</span><br><span class="hljs-comment line-number">23.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">24.</span>    }<br><span class="hljs-comment line-number">25.</span>}<br><span class="hljs-comment line-number">26.</span><span class="hljs-type">ReactDOM</span>.render(&lt;<span class="hljs-type">Person</span>/&gt;, app);<br></code></pre>

<blockquote>
  <p>剪贴板事件 onKeyDown onKeyPress onKeyUp <br>
  键盘事件 onFocus onBlur <br>
  焦点事件 onChange onInput onSubmit <br>
  鼠标事件 onClick onDoubleClick onMouseDown onMouseEnter onMouseLeave</p>
</blockquote>

<h5 id="表单元素双向数据绑定">表单元素双向数据绑定</h5>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scala"><span class="hljs-comment line-number">1.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Person</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">2.</span>    constructor(props) {<br><span class="hljs-comment line-number">3.</span>        <span class="hljs-keyword">super</span>(props);<br><span class="hljs-comment line-number">4.</span>        <span class="hljs-keyword">this</span>.state = {<br><span class="hljs-comment line-number">5.</span>            value: <span class="hljs-number">0</span><br><span class="hljs-comment line-number">6.</span>        };<br><span class="hljs-comment line-number">7.</span>    }<br><span class="hljs-comment line-number">8.</span><br><span class="hljs-comment line-number">9.</span>    handleChange(e) {<br><span class="hljs-comment line-number">10.</span>        <span class="hljs-keyword">this</span>.setState({<br><span class="hljs-comment line-number">11.</span>            value: e.target.value<br><span class="hljs-comment line-number">12.</span>        });<br><span class="hljs-comment line-number">13.</span>    }<br><span class="hljs-comment line-number">14.</span><br><span class="hljs-comment line-number">15.</span>    render() {<br><span class="hljs-comment line-number">16.</span>        <span class="hljs-keyword">var</span> value = <span class="hljs-keyword">this</span>.state.value;<br><span class="hljs-comment line-number">17.</span>        <span class="hljs-keyword">return</span> &lt;div&gt;<br><span class="hljs-comment line-number">18.</span>            &lt;input style={{color: <span class="hljs-symbol">'re</span>d'}} <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text"</span><br><span class="hljs-comment line-number">19.</span>                   value={value} onChange={<span class="hljs-keyword">this</span>.handleChange.bind(<span class="hljs-keyword">this</span>)}/&gt;<br><span class="hljs-comment line-number">20.</span>            &lt;p&gt;{value}&lt;/p&gt;<br><span class="hljs-comment line-number">21.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">22.</span>    }<br><span class="hljs-comment line-number">23.</span>}<br><span class="hljs-comment line-number">24.</span><span class="hljs-type">ReactDOM</span>.render(&lt;<span class="hljs-type">Person</span>/&gt;, app);<br></code></pre>

<blockquote>
  <p>如果给表单元素设置了value属性，则必须指定onChange事件处理函数，否则 此字段会变成只读状态</p>
</blockquote>

<h5 id="复合组件">复合组件</h5>

<blockquote>
  <p>多个简单的组件嵌套，可构成一个复杂的复合组件，从而完成复杂的交互逻辑</p>
</blockquote>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scala"><span class="hljs-comment line-number">1.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Panel</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">2.</span>    render() {<br><span class="hljs-comment line-number">3.</span>        <span class="hljs-keyword">return</span> &lt;div className=<span class="hljs-string">"panel panel-default"</span>&gt;<br><span class="hljs-comment line-number">4.</span>            &lt;<span class="hljs-type">PanelHead</span> head={<span class="hljs-keyword">this</span>.props.head}/&gt;<br><span class="hljs-comment line-number">5.</span>            &lt;<span class="hljs-type">PanelBody</span> body={<span class="hljs-keyword">this</span>.props.body}/&gt;<br><span class="hljs-comment line-number">6.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">7.</span>    }<br><span class="hljs-comment line-number">8.</span>}<br><span class="hljs-comment line-number">9.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PanelHead</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">10.</span>    render() {<br><span class="hljs-comment line-number">11.</span>        <span class="hljs-keyword">return</span> &lt;div className=<span class="hljs-string">"panel-heading"</span>&gt;<br><span class="hljs-comment line-number">12.</span>            {<span class="hljs-keyword">this</span>.props.head}<br><span class="hljs-comment line-number">13.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">14.</span>    }<br><span class="hljs-comment line-number">15.</span>}<br><span class="hljs-comment line-number">16.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PanelBody</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">17.</span>    render() {<br><span class="hljs-comment line-number">18.</span>        <span class="hljs-keyword">return</span> &lt;div className=<span class="hljs-string">"panel-body"</span>&gt;<br><span class="hljs-comment line-number">19.</span>            {<span class="hljs-keyword">this</span>.props.body}<br><span class="hljs-comment line-number">20.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">21.</span>    }<br><span class="hljs-comment line-number">22.</span>}<br><span class="hljs-comment line-number">23.</span><span class="hljs-type">ReactDOM</span>.render(&lt;<span class="hljs-type">Panel</span> head=<span class="hljs-string">"头部"</span> body=<span class="hljs-string">"正文"</span>/&gt;, app);<br></code></pre>

<h5 id="dom操作">DOM操作</h5>

<blockquote>
  <p>给组件加上ref=”xxx”后，可在父组件中通过this.refs.xxx获取该DOM元素</p>
</blockquote>

<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scala"><span class="hljs-comment line-number">1.</span><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Panel</span> <span class="hljs-keyword"><span class="hljs-keyword">extends</span></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> {</span><br><span class="hljs-comment line-number">2.</span>    handleClick(e) {<br><span class="hljs-comment line-number">3.</span>        <span class="hljs-keyword">this</span>.refs.msg.focus();<br><span class="hljs-comment line-number">4.</span>    }<br><span class="hljs-comment line-number">5.</span><br><span class="hljs-comment line-number">6.</span>    render() {<br><span class="hljs-comment line-number">7.</span>        <span class="hljs-keyword">return</span> &lt;div&gt;<br><span class="hljs-comment line-number">8.</span>            &lt;input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"text"</span> ref=<span class="hljs-string">"msg"</span>/&gt;<br><span class="hljs-comment line-number">9.</span>            &lt;input <span class="hljs-class"><span class="hljs-keyword">type</span>=</span><span class="hljs-string">"button"</span> value=<span class="hljs-string">"获得焦点"</span><br><span class="hljs-comment line-number">10.</span>                   onClick={<span class="hljs-keyword">this</span>.handleClick.bind(<span class="hljs-keyword">this</span>)}/&gt;<br><span class="hljs-comment line-number">11.</span>        &lt;/div&gt;;<br><span class="hljs-comment line-number">12.</span>    }<br><span class="hljs-comment line-number">13.</span>}<br><span class="hljs-comment line-number">14.</span><span class="hljs-type">ReactDOM</span>.render(&lt;<span class="hljs-type">Panel</span>/&gt;, app);<br></code></pre>

<h4 id="3实战练习百度模糊搜索">3、实战练习：百度模糊搜索</h4></div></body></html>