React学习第三天（ref绑定Dom对象、高阶组件、路由）

React学习第三天

1.ref绑定

与正常的js绑定元素并操作dom不同，在React中，需要通过ref绑定（不太建议这样操作的原因是因为可以通过Setstate进行数据操作）。

若需要操作，需要在类组件中Creat一个Ref，并在需要绑定的对象上设置声明好的名称即可

class Inp extends React.Component {
  constructor(props) {
    super(props)
    //此处声明该名称为ref
    this.refTest = React.createRef()
    this.state = {
      username: '',
      password: '',
    }
  }
  setUsername = (event) => {
    this.setState({
      username: event.target.value,
    })
  }
  setPassword = (event) => {
    this.setState({
      password: event.target.value,
    })
  }
  refClick = () => {
    this.refTest.current.focus()
  }
  render() {
    return (
      <div>
        <label>
          <span>用户名</span>
          <input
            value={this.state.username}
            onChange={this.setUsername}
            placeholder="请输入用户名"
            type="text"
          />
        </label>
        <label>
          <span>密码</span>
          <input
          //在需要绑定的元素上填写好声明的名称
            ref={this.refTest}
            value={this.state.password}
            onChange={this.setPassword}
            placeholder="请输入密码"
            type="password"
          />
        </label>
        <div>用户名：{this.state.username}</div>
        <div>密码：{this.state.password}</div>
        //一个简单的ref绑定测试
        <div onClick={this.refClick}>世界聚焦于你</div>
      </div>
    )
  }
}

2.高阶组件

声明一个函数A组件，里面存放好数据。此时再声明另一个函数B组件，用于返回显示A组件中的数据

function A(props) {
  return (
    <div>
      <h1>这是A组件</h1>
      <div>用户名:{props.user.username}</div>
      <div>详细信息:{props.user.msg}</div>
    </div>
  )
}
function GJ(Component) {
  let user = {
    username: 'Gelx',
    msg: '测试高阶组件',
  }
  return () => <Component user={user}></Component>
}

let HighA = GJ(A)

此时的A组件中的props只有GJ中的user值，无法实现其他的用法

3.路由

和Vue类似，但在React中需要另安装react-router-dom，安装好后引用即可在界面中实现路由，以及在实现动态路由时，实现方式为:(相关数据名称)

import { BrowserRouter as Router, Route, Link }from 'react-router-dom'

function DT(props) {
  let back = () => {
    props.history.push('/')
  }

  console.log(props)
  return (
    <div>
    //返回首页可以通过两种方式，第一：点击事件返回
      <button onClick={back}>返回首页</button>
      //第二：通过Link标签返回
      <Link to="/">返回首页</Link>
      <h1>这是{props.match.params.id}的界面</h1>
    </div>
  )
}

function App() {
  return (
    <div>
      <Router>
        <Route path="/router/:id" exact component={DT}></Route>
      </Router>
    </div>
  )
}