美文网首页
React 组件

React 组件

作者: 我爱阿桑 | 来源:发表于2020-06-25 23:21 被阅读0次
  • 函数式组件
  • 类组件
1 . 函数式组件
  • 一般用于静态界面
function Childom( props ){
   //  props 打印结果就是{tianqi:'天气'}
   let   title=<h2>我是副标题</h2>
    let  tianqi=props.tianqi
    let  isGo=tianqi=="下雨"?"不出门" :"出门"
   return (
      <div>
         <h1>这是一个函数组件</h1>
         {title}
          <div>
              是否出门 {isGo}
          </div>
      </div>
   )
}
// 在这可以传参,
ReactDOM.render(<Childom   tianqi="下雨"/>,document.getElementById('root'))
2 . 类组件
  • 一般有交互的组件,有数据的操作
class HellowWorld extends React.Component{
  render(){
          console.log(this)
        // { props:'下雨'}
     return(
        <div>
          <h1>这是一个类组件</h1>
        </div>
   )
 }
}
ReactDOM.render(<HellowWorld   tianqi="下雨" />,document.getElementById('root'))
3 . 复合组件--组件中又有组件

相关文章

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • 组件

    组件是React的基石,所有的React应用程序都是基于组件的。React组件,可以通过React.createC...

  • ReactNative学习笔记(三)Hello World!

    React Native 看起来很像 React,但React Native的基础组件是原生组件 不是web组件。...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • React 进阶二 组件详解

    React组件 React的组件大概分为俩部分,无状态组件和有状态组件 无状态组件。下面React官网中定义的一个...

  • 2、react基础介绍

    React理念 划分组件边界的原则 React组件的数据种类 React组件的声明周期 组件的划分 高内聚 低耦合...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • react16.3-jest

    功能组件和UI组件 react-antd 命名 react 规定组件开头都为大写,所以如果react项目如果用an...

  • 如何创建React组件并发布到npm?

    实现步骤: 创建React组件项目; 创建测试项目并引用组件; 发布React组件到npm上; 一、创建React...

  • RN原始项目-HelloWorld

    React Native看起来很像React,只不过其基础组件是原生组件而非web组件,。要理解React Nat...

网友评论

      本文标题:React 组件

      本文链接:https://www.haomeiwen.com/subject/pacrfktx.html