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>
  )
}
複製代碼