React中创建组件（一）

React中创建组件

第1种 - 创建组件的方式

  使用构造函数来创建组件，如果要接收外界传递的数据，需要在构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX创建的虚拟DOM

• 1. 创建组件：

 function Hello () { 
 	// return null 
 	return <div>Hello 组件</div>
 }

ReactDom.render(<div>
    <Hello/>
</div>, document.getElementById('app'));

• 2. 注意：组件的名称首字母必须是大写。如果写成小写，则会报错：
  
  

• 3. 为组件传递数据：

1. 父组件向子组件传递数据

// 在构造函数中，使用 props 形参，接收外界 传递过来的数据
function Hello(props) {
  // props.name = 'zs'
  console.log(props)
  // 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；
  return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>

// 使用组件并 为组件传递 props 数据
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

页面渲染效果：

2. 使用{…obj}属性扩散传递数据

  如果传递过来的数据过多，可以用{...obj}属性 即Es6扩展运算符

<Hello {...dog} />

• 4. 将组件封装到单独的文件中

  默认情况下，如果不做配置，不能省略.jsx后缀名

• 5. 在导入组件的时候，如何省略组件的.jsx后缀名：

  // 打开 webpack.config.js ，并在导出的配置对象中，新增 如下节点：
  resolve: {
      extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
      alias: {
          '@': path.join(__dirname, './src')
      }
    }
  

  • 6. 在导入组件的时候，配置和使用@路径符号：即上文代码alias属性
  • 同步博客请移步：http://by.wlgzs.club:8082/articles/2019/10/17/1571291686084.html