react小记

折腾。

这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的原因。