React学习:事件绑定、组件定义、for、map循环-学习笔记

最新推荐文章于 2024-01-12 15:31:45 发布

monkeyhlj

最新推荐文章于 2024-01-12 15:31:45 发布

阅读量383

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/119183428

版权

前端学习专栏收录该内容

53 篇文章 2 订阅

订阅专栏

本文介绍了React中的事件绑定，包括构造器中绑定、简单方式和箭头函数方式。详细展示了组件定义及参数传递的方法，并通过实例演示了如何在React中使用for循环和map函数进行数据渲染。此外，还包含了对于状态管理和组件交互的基本理解。

摘要由CSDN通过智能技术生成

文章目录

- React学习:事件绑定、组件定义、for、map循环-学习笔记

React学习:事件绑定、组件定义、for、map循环-学习笔记

事件绑定

<!DOCTYPE html>
<html>
  <head>
    <title>react-tab多选项切换</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/babel">
      window.onload = function(){
        //事件绑定三种方式
        //1、官方推荐  构造器中声明绑定 （见下构造函数中）
        //<a className={s==1?"menu-selected":''} onClick={this.change1}>女装/男装</a>
        //2、简单方式
        //<a className={s==1?"menu-selected":''} onClick={this.change1.bind(this)}>女装/男装</a>
        //3、es6 箭头函数
        //<a className={s==2?"menu-selected":''} onClick={()=>this.change()}>酒类/生鲜1</a>
        
        //组件
        class ListInfo extends React.Component{
          render(){
            if(this.props.num==1){
              return <h1>1111111</h1>
            }else if(this.props.num==2){
              return <TabTwo />
            }else {

            }
          }
        }
        class TabOne extends React.Component{
          render(){
            return (
              <div>
                <ul>
                  <li>11111</li>
                  <li>11111</li>
                </ul>
              </div>
            )
          }
        }
        class TabTwo extends React.Component{
          render(){
            return (
              <div>
                <ul>
                  <li>2222222</li>
                  <li>2222222</li>
                </ul>
              </div>
            )
          }
        }
          //组件
          class Tab extends React.Component{
            constructor(){
              super();
              this.state = {  //等同于vue  data
                s:1
              };
              //this.change1 = this.change1.bind(this);  //构造器中声明绑定
            }
            change(i){
                this.setState({
                    s:i
                })
            }
            change1(i){
              this.setState({
                    s:i
                })
               console.log(i);
            }
   
            render(){
              var {s} = this.state;
              return (
                <div id="layout">
                  <div id="menu">
                      <div className="menu-main">
                          <a className={s==1?"menu-selected":''} onClick={this.change1.bind(this,1)}>女装/男装</a>
                          <a className={s==2?"menu-selected":''} onClick={()=>this.change(2)}>酒类/生鲜1</a>
                          <a className={s==3?"menu-selected":''} onClick={()=>this.change(3)}>酒类/生鲜2</a>
                          <a className={s==4?"menu-selected":''} onClick={()=>this.change(4)}>酒类/生鲜3</a>
                      </div>
                  </div>
                  <div id="main">
                      <div className="content">
                          <h2>一个专门从事购物的网站</h2>
                          <div>
                              <p>年轻人迷茫的的原因——在本该拼搏的年龄，想的太多，做的太少</p>
                              <ListInfo num={s} />
                          </div>
                      </div>
                  </div>
              </div>
              )
            }
          };
          ReactDOM.render(
            <Tab/>,
            document.getElementById('app'));
      }
    </script>
  </body>
</html>

<!-- var x = 100;
function f1(){
  return this.x
}
var obj ={
  x : 999
};
var a = f1.bind(obj);
a(); -->

组件定义（参数传递）

<!DOCTYPE html>
<html>
  <head>
    <title>react-tab多选项切换</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/babel">
      window.onload = function(){
        var obj = {
          id:1,
          name:'abc',
          age:20,
          address:'wh',
          arr:[1,2,3],
          obj2:{id:11}
        };
        //函数定义   ES5    需要显示传递props
        function Hello(props){
          return <h1>hello {props.address}</h1>
        }
        //组件  es6  class类
        class Tab extends React.Component{
          render(){
            return (
              <div>
                <ul>
                  <li>11111  {this.props.name}</li>
                  <li>11111 </li>
                  <li>11111</li>
                </ul>
              </div>
            )
          }
        }

          ReactDOM.render(
            <div>
              <Hello  address={obj.address}/>
              {/*<Tab  obj ={obj} />*/}
              <Tab  {...obj} />
            </div>,
            document.getElementById('app'));
      }
    </script>
  </body>
</html>

for、map循环

<!DOCTYPE html>
<html>
  <head>
    <title>react-tab多选项切换</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/index.css" rel="stylesheet">
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/babel">
      window.onload = function(){
        //第一种  map
        // var arr = [1,2,3,4,5,6];
        // //组件  es6  class类
        // class Tab extends React.Component{
        //   render(){
        //     return (
        //       <div>
        //         <ul>
        //           {
        //             arr.map(function(item,index){
        //               return <li key={index}>{item}</li>
        //             })
        //           }
        //         </ul>
        //       </div>
        //     )
        //   }
        // }
        //   ReactDOM.render(
        //     <div>
        //       <Tab  />
        //     </div>,
        //     document.getElementById('app'));

        //数组写法
        // var arr2 = [
        //             <h1 key="1">1</h1>,
        //             <h1 key="2">2</h1>,
        //             <h1 key="3">3</h1>
        //           ];
        //   ReactDOM.render(
        //     <div>
        //       {arr2}
        //     </div>,
        //     document.getElementById('app'));

         //for写法
         var arr = [1,2,3,4,5,6];
          var arr3 = [];
          for(var i=0;i<arr.length;i++){
            arr3.push(<h1 key={i}>{arr[i]}</h1>)
          };
          ReactDOM.render(
            <div>
              {arr3}
            </div>,
            document.getElementById('app'));
      }
    </script>
  </body>
</html>