React 基础笔记(补充说明 ref,语义等等)(十二)

React

发布日期: 2019-12-04

更新日期: 2019-12-08

文章字数: 662

阅读时长: 3 分

阅读次数:

Fragment 语义化标签

当最外层不想用 div 又必须使用包裹层的时候

import React, { Fragment } from 'react'

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  )
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  )
}

htmlFor 比如 label 不能直接写 for

要用 htmlFor 来代替

<label htmlFor="namedInput">Name:</label>
<input id="namedInput" type="text" name="name" />

ref 来控制节点

1.给元素绑定 ref,ref 里面必须是方法

<input type="text" value={this.state.value} onChange = {this.changeall}
ref={(content)=>{this.content=content}} >

2. 使用的时候


changeall() {
  console.log(this.content)
  let value = this.content.value
  /*这种情况就是异步操作*/
  this.setState(() => {
    return {
      value
    }
  })
}

Context 可以直接传递很多层

有的时候父组件给子组件一层层传递数据非常麻烦，所以可以利用 Context 来传递

1. 创建上下文的组件

const { Provider, Consumer } = React.createContext(defaultValue)

2. 父组件放置共享数据

<Provider value={/*要共享的数据*/}>/*里面是要渲染的东西比如子组件*/</Provider>

3.子组件要使用父组件的数据了

<Consumer>
  {value => {
    /*value就是父组件传递过来的数据子组件可以使用*/
  }}
</Consumer>

实例的例子

1. App.js 父组件

//App.js
import React from 'react'
import Son from './son' //引入子组件
// 创建一个 theme Context,
export const { Provider, Consumer } = React.createContext('默认名称')
export default class App extends React.Component {
  render() {
    let name = '小人头'
    return (
      //Provider共享容器 接收一个name属性
      <Provider value={name}>
        <div
          style={{
            border: '1px solid red',
            width: '30%',
            margin: '50px auto',
            textAlign: 'center'
          }}
        >
          <p>父组件定义的值:{name}</p>
          <Son />
        </div>
      </Provider>
    )
  }
}

2.son.js 子组件

//son.js 子类
import React from 'react'
import { Consumer } from './index' //引入父组件的Consumer容器
import Grandson from './grandson.js' //引入子组件
function Son(props) {
  return (
    //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
    <Consumer>
      {name => (
        <div
          style={{
            border: '1px solid blue',
            width: '60%',
            margin: '20px auto',
            textAlign: 'center'
          }}
        >
          <p>子组件。获取父组件的值:{name}</p>
          {/* 孙组件内容 */}
          <Grandson />
        </div>
      )}
    </Consumer>
  )
}
export default Son

3. grandson.js 孙组件

//grandson.js 孙类
import React from 'react'
import { Consumer } from './index' //引入父组件的Consumer容器
function Grandson(props) {
  return (
    //Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
    <Consumer>
      {name => (
        <div
          style={{
            border: '1px solid green',
            width: '60%',
            margin: '50px auto',
            textAlign: 'center'
          }}
        >
          <p>孙组件。获取传递下来的值:{name}</p>
        </div>
      )}
    </Consumer>
  )
}
export default Grandson