React16.8中关于children和render props的认知

时间 2019-12-04

标签 react16.8 react 关于 children render props 认知栏目 React 繁體版

原文原文链接

1、组件的建立方式

一、使用createClass方式建立(已经被淘汰了)html

二、类组件react

import React, { Component } from 'react'

export default class Components1 extends Component {
  render() {
    return <div /> } } 复制代码

三、函数组件(比较推荐的方式)数组

import React from 'react'

function Child(props) {
  return <></> } export default () => { return ( <> <Child /> </> ) } 复制代码

2、组件的调用方式(使用`children`)

直接把组件当作一个DOM节点,在里面写内容,在该组件中使用childrend进行渲染函数

一、简单的引用ui

import React from 'react'

function Child(props) {
  return <>我是child组件</> } export default () => { return ( <> <Child /> </> ) } 复制代码

二、组件中传递html代码spa

import React from 'react'

function Child(props) {
  console.log(props)
  return (
    <> <p>我是child组件</p> {props.children} </> ) } export default () => { return ( <> <Child> {/* 在组件中直接写内容能够传递到该组件的children上 */} <h1>我是父组件传递进去的</h1> <h2>我是父组件传递进去的内容二</h2> </Child> </> ) } 复制代码

三、传递一个组件进去code

import React from 'react'

function Parent(props) {
  return (
    <> <p>我是Parent组件</p> {props.children} </> ) } function Child(props) { return ( <> <p>我是Child组件</p> </> ) } export default () => { return ( <> <Parent> <Child /> </Parent> </> ) } 复制代码

四、组件中传递一个函数进去xml

import React from 'react'

function Child(props) {
  return (
    <> <p>我是child组件</p> {props.children({ name: '哈哈', gender: '男' })} </> ) } export default () => { return ( <> <Child> {args => { console.log(args) return <div id="child">{args.name}</div> }} </Child> </> ) } 复制代码

3、`render props`的使用参考文档

主要做用点

一、使用Render Props解决来横切关注点(组件的复用[复用组件内部一些逻辑])
二、Render prop 是一个用于告知组件须要渲染什么内容的函数 prop与传统组件的props有点相似,只是但愿渲染的是一个组件或者一个DOM节点
三、Render props主要用于组件代码的复用

代码案例

一、使用render props渲染一个DOM节点htm

import React from 'react'

export default function Render03() {
  return (
    <div> <Child render={props => { // 能够接收render函数里面的参数 console.log(props) return ( <div style={{ color: '#f90' }}> 我是渲染出来的--{props.name}--{props.gender} </div> ) }} /> </div> ) } function Child(props) { return ( <> <h1>我是child组件</h1> {/* render里面传递参数,真正渲染的地方接收参数 */} {props.render({ name: '张三', gender: '男' })} </> ) } 复制代码

二、使用render props渲染一个组件文档

import React from 'react'

export default function Render04() {
  return (
    <div id="render04">
      <Child1 render={props => <Child2 {...props} />} />
    </div>
  )
}

function Child1(props) {
  return (
    <>
      <h2>我是child1组件</h2>
      {props.render({ name: '张三', gender: '男' })}
    </>
  )
}

function Child2(props) {
  console.log(props)
  return (
    <>
      <h2>我是child2组件</h2>
      <h3>{props.name}</h3>
    </>
  )
}
复制代码

三、使用render props达到组件的复用

import React, { useState } from 'react'

export default function Render05() {
  return (
    <div>
      <Mouse
        render={props => {
          return <Cat {...props} />
        }}
      />
      <Mouse
        render={props => {
          console.log(props)
          return (
            <div
              style={{
                width: '100px',
                height: '100px',
                background: '#f90',
                position: 'absolute',
                top: props.y - 50,
                left: props.x - 50
              }}
            />
          )
        }}
      />
    </div>
  )
}

function Cat(props) {
  return (
    <div>
      <div
        style={{
          position: 'absolute',
          width: '100px',
          height: '100px',
          background: '#f00',
          cursor: 'move',
          left: props.x - 50,
          top: props.y - 50
        }}
      />
    </div>
  )
}
function Mouse(props) {
  const [location, setLocation] = useState({ x: 0, y: 0 })

  const handleMouseMove = event => {
    setLocation({
      x: event.clientX,
      y: event.clientY
    })
  }
  return (
    <div style={{ height: '100%' }} onMouseMove={handleMouseMove}>
      {props.render(location)}
    </div>
  )
}
复制代码