react小记

Posted 2022-01-29 左直拳

折腾。

这2天弄了一下react，觉得比较绕，记录一下。

1、控件嵌套
自定义控件内部再嵌套其他控件。主要是外层这个控件，代码里要处理一下，将嵌套在自己里面的控件或内容展示出来。
比如：

const b1 = 
  height: '400px',

const sb1 = JSON.stringify(b1)
。。。
<Block title="备案申请" style=sb1>
     <Button type="primary">
       太空飞船租赁业务备案
     </Button>
</Block>

其中，<Block>是自定义控件。它是一个方框。按这里的意图，是要在里面放一个按钮。

Block的完整代码：

import React,  Component  from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import  title  from '@/defaultSettings'

const b = 
  margin: '5px',
  border: 'solid 1px #007ACC',

const bTitle = 
  backgroundColor: '#007ACC', //驼峰法
  minHeight: '25px',
  color: '#fff',
  fontSize: '14px',


class Block extends Component 
  constructor(props) 
    super(props)
    this.state = 
  

  static propTypes = 
    children: PropTypes.node,
  

  getStyle = (self) => //设置样式
    if (!self.props.style) return b

    let b2 = JSON.parse(JSON.stringify(b))
    let styles = JSON.parse(self.props.style)
    for (let key in styles) 
      let s = styles[key]
      b2[key] = s
    
    return b2
  

  render() 
    return (
      <>
        <div style=this.getStyle(this)>
          <div>
	        <!-- 对应页面中的 title="备案申请" style=sb1 -->
            <div style=bTitle>this.props.title</div>
          </div>
          <div>
	        <!-- 输出嵌套内容 -->
            <ul>this.props.children</ul>
          </div>
        </div>
      </>
    )
  


export default Block

2、控件设置
假设我要改变一个文本框里的值，该怎么办呢？

如果是VUE，很简单，绑定一个vue变量就可以了。而在react中，也是差不多的做法。

以下代码很简单，就是一个下拉框，一个文本框。当下拉框改变选项的时候，将值写入文本框。主要是文本框绑定了变量tenantValue，而tenantValue又指向了控件中的state.tenantValue。这样下拉框改变选项时将值赋给state.tenantValue即可改变文本框值。这一点可以说，react没有vue那么简洁，比较绕。为什么不能直接操作一个变量呢？非要通过state进行传递。比较绕是react这几天给我的感觉。

class Login extends Component 
  state = 
    tenantValue: '10001',
  

  changeCategory = (value) => 
    this.setState( tenantValue: value )
  

  render() 
    const  tenantValue  = this.state 

    return (
      <div>
            <Select
              defaultValue="10001"
              onChange=this.changeCategory
            >
              <Option value="10001">太空飞船经营人</Option>
              <Option value="10002">太空管理机构</Option>
            </Select>
            <Tenant
              name="tenantCode"
              defaultValue=tenantValue
            />
      </div>
    ) //end of return
   //end of render


export default Login

react组件有2个对象：state和props。props 是传递给组件的（类似于函数的形参），而 state 是在组件内被组件自己管理的（类似于在一个函数内声明的变量）。state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

3、一些古怪的语法
比如：

    //相当于 const type = this.state.type
    const  type  = this.state

再比如：

import  connect  from 'dva'

@connect(( login, loading ) => (
  login,
  submitting: loading.effects['login/login'],
))
class Login extends Component 

@connect的作用是建立Login类的State和Props的映射关系。connect接收一个函数，返回一个函数。
@是一个语法糖。在这里，@connect相当于，传入Login，返回建立了State和Props映射关系的新Login
如果没有这个修饰符，是这样写的：

  export default connect(Login => 
    ……
  )(Login）

注解会自动在 Login 组件外面包裹一层 Connect 组件，这个组件把 redux 状态树中我们需要的值传入 Login 组件的 props 中。

又比如

( login, loading ) => (
  login,
  submitting: loading.effects['login/login'],
)

// 等于以下代码
function (state) 
  var login = state.login;
  var loading = state.loading;
  return 
    login: login,
    submitting: loading.effects['login/login'],
  ;
 

4、小结
为什么一个前端，会搞得如此复杂。这其中，一部分是react自己的原因；也有一部分是es6、es7的原因。