04.创建组件的第一种方式

原创于 2021-03-12 21:44:59 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用React创建简单组件的例子，并展示了如何将对象属性传递给组件作为props。

// 1.导包
import React from 'react'
import ReactDOM from 'react-dom'

//第一种创建组件的方式
function Hello(props) {
  //如果在一个组件中return一个null,则表示此组件为空，什么都不会渲染
  // return null
  //在组件中，必须返回一个合法的JSX虚拟DOM元素
  console.log(props)
  // 结论 ：不论是Vue 还是React，组件中的props永远都是只读的，不能被重新赋值
  return <div>这是Hello组件 -- {props.name}</div>
}

const dog = {
  name: '大黄',
  age: 3,
  gender: '熊'
}

ReactDOM.render(<div>
  <Hello {...dog}></Hello>
</div>, document.getElementById('app'))