react 学习笔记第二次课

  • Z时代
  • 2024-01-10
  • 分类：综合

react


react 第二次课

jsx--变量
jsx--function
component

------------------------------------------


component 组件

写法

1.class
2.自定义组件


1.class //继承

class HelloMessage extends React.Component{//组件
render(){
return <h1>hello,{this.props.abc}</h1>
}
};

传参：通过标签的自定义属性传参

例子： <HelloMessage abc={data.address}/>

获取参数：例子：{this.props.abc}

------------------------------------------

2.自定义组件


const data = {
address:'wuhan',
obj:{
name:'sonia'
}
};

const name = 'lili';
/*自定义组件 需要显示传递props 方法二*/
function Welcome(props){
return <h1>hello,{props.name}</h1>
};


使用：<Welcome name={data.address}/>

注意：自定义函数名 首字母要求大写！！

------------------------------------------

组件嵌套

 下面是代码展示

<!DOCTYPE html>
<html>
  <head>
    <title>jSX-function</title>
    <meta charset="UTF-8" />
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
    <style>
      .lists {
        color:#f60;
      }
    </style>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
      /*JSX  用于将模板转为 HTML 语言，并插入指定的 DOM 节点*/
      function action(item){
        return item.name +''+item.age;
        //return item;
      };
      //var user ='world123';
      const user = {
        name:'lili',
        age:22
      };
      var element =<h1 className="lists">hello,{action(user)}</h1>
      ReactDOM.render(
        element,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

　　

<!DOCTYPE html>
<html>
  <head>
    <title>component</title>
    <meta charset="UTF-8" />
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
     class HelloMessage extends React.Component{//组件
       render(){
         return <h1>hello,{this.props.abc}</h1>
       }
     };
     const data = {
       address:'wuhan',
       obj:{
         name:'sonia'
       }
     };
     const name = 'lili'; 
     /*自定义组件  需要显示传递props 首字母大写 方法二*/
     function Welcome(props){
       return <h1>hello,{props.name}</h1>
     };
      ReactDOM.render(
        <div>
          <Welcome name={data.address}/>
          {/*<HelloMessage></HelloMessage>*/}
          <HelloMessage abc={data.address}/>
        </div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

　　

<!DOCTYPE html>
<html>
  <head>
    <title>component--组合（嵌套）</title>
    <meta charset="UTF-8" />
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
     const data = {
       address:'wuhan',
       obj:{
         name:'sonia'
       }
     };
     const name = 'lili'; 
     /*自定义组件  需要显示传递props*/
     function Welcome(props){
       return <h1>hello,{props.name}</h1>
     };
     function App(){/*嵌套*/
       return(
         <div>
            <Welcome name={data.address}/>
            <Welcome name='list2'/>
            <Welcome name='list3'/>
         </div> 
       );
     };
      ReactDOM.render(
        <App />,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

　　

<!DOCTYPE html>
<html>
  <head>
    <title>component--组合（嵌套）</title>
    <meta charset="UTF-8" />
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div ></div>
    <script type="text/babel">
     const comment = {
        date: new Date(),
        text: 'I hope you enjoy learning React!',
        author: {
          name: 'Hello Kitty',
          avatarUrl: 'http://placekitten.com/g/64/64'
        }
      };
      function formatDate(d){
        return d.toLocaleDateString();
      };
      function Comment(props){
        return(
          <div className="list1">
            <div>
              <img src={props.author.avatarUrl}/>
              <p>{props.author.name}</p>
            </div>
            <div>{props.text}</div>
            <div>{formatDate(props.date)}</div>
          </div>
        )
      };
      ReactDOM.render(
        <Comment 
          date={comment.date}
          text={comment.text}
          author={comment.author}/>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

　　

以上是 react 学习笔记第二次课 的全部内容， 来源链接： utcz.com/z/382743.html

回到顶部