react基础02--基础函数&自定义函数组件&属性-CFANZ编程社区

react基础02--基础函数&自定义函数组件&属性

1 介绍
2 方法案例

2.1 使用函数
2.2 引用组件
2.3 props 属性
2.4 自定义class组件

3 注意事项
4 说明

1 介绍

本文在 react基础01–初次体验 react 的基础上继续学习基础函数、自定义函数组件、props属性和自定义class 组件，并配合实例加以说明。

2 方法案例

2.1 使用函数

清理无用的文件，只保留 index.html 和 index.js
vim index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width-device-wideth, initial-scale-1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root">
    </div>
    <!-- <hr/> -->
  </body>
</html>

vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';

function a(){
  return <div> this is a function </div>
}

function b(str){
  return <div>{str}</div>
}

ReactDOM.render(
    <div>
      <h1> 用户登录 </h1>{a()}
      <hr/>
      账号:<input/>
      {b("this is b function")}
    </div>
  ,document.getElementById('root')
);

结果:

react基础02--基础函数&自定义函数组件&属性_react.js

2.2 引用组件

vim a.js

function a(){
    return <div> this a's content</div>
}
export default a;

vim b.js

import React from "react"
// 使用 JSX 就需要引用 react
function b(str){
    return <div>{str}</div>
}
export default b;

vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';
import A from './a'
import B from './b'

ReactDOM.render(
    <div>
      <h1> 用户登录 </h1> <A></A>
      {/* a() */}
      <hr/>
      账号:<input/>
      {B("this is b's parameter")}

    </div>
  ,document.getElementById('root')
);

结果：

react基础02--基础函数&自定义函数组件&属性_react函数组件_02

注意：此处如果通过组件的方式使用B, 那么就无法正常传参数。

2.3 props 属性

引用组件的时候无法正常传递参数，因此可以在指定的组件中新增很多props，然后通过属性的方式传递给该组件。
如下将 str 和 id 传递给组件C。
vim c.js

import React from "react"
// 使用 JSX 就需要引用 react
function c(props){
    return (
    <div>
        <h2> 
            {props.str} 
        </h2>
        <h2>
            c's id={props.id}
        </h2>
    </div>
    )
}
export default c;

vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';
import A from './a'
import B from './b'
import C from './c'

ReactDOM.render(
    <div>
      <h1> 用户登录 </h1> <A></A>
      {/* a() */}
      <hr/>
      账号:<input/>
      {B("this is b's parameter")}
      <hr/>
      <C str="this is c's parameter" id='c01'> </C>
    </div>
  ,document.getElementById('root')
);

结果：

react基础02--基础函数&自定义函数组件&属性_javascript_03

2.4 自定义class组件

使用组件的时候，既可以传值|字符串，又可以传表达式，还可以传递方法；
vim d.js

import React from "react"

// 把类当做函数的一个集合
class d extends React.Component{
    constructor(props){ // 创建D组件时候必须要执行的方法，构造方法
        super();
        console.log('id='+props.id)
    }
    render(){
        return (
            <div>
                <h1>this is d.render</h1>
                {this.props.id}, {/*此处需要使用this，否则无法确定是哪个实例传递过来的，导致报错*/}
                {this.props.class},
                {this.header()}
                {this.content()}
                {this.footer()}
            </div>
        )
    }
    header() {
        return (
            <h2>this header</h2>
        )
    }   
    content(){
        return (
            <h2>this content</h2>
        )
    }
    footer(){
        return (
            <h2>this is fotter</h2>
        )
    }
}
export default d;

vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';
import A from './a'
import B from './b'
import C from './c'
import D from './d'

ReactDOM.render(
    <div>
      <h1> 用户登录 </h1> <A></A>
      <hr/>
      账号:<input/>
      {B("this is b's parameter")}
      <hr/>
      <C str="this is c's parameter" id='c01'> </C>
      <hr/>
      <D id='1' class={3*3}></D>{/*实例化D组件*/}
      <D id='2'></D>{/*实例化D组件*/}
    </div>
  ,document.getElementById('root')
);

结果：

react基础02--基础函数&自定义函数组件&属性_react函数组件_04

3 注意事项

js 中 export 方法

1. export 唯一的项
export default a
使用方法：
import A from './a'

2. export 多个项
export {
    a,
    i
}
使用方法：
import {A,i} from './a'

组件中自定义的id 和 class 等字段和html 中的字段已经不是同一个性质了，是用户在组件中新加的字段

4 说明

React基础入门+综合案例

react 官网