jsx,Code片段,代码实例,代码示例,代码片段库

jsx React 16 createContext

Немногоупростимиерархиюкомпонентов

createContext

// Дед
export const ClickContext = React.createContext(false)
constructor(props) {
    super(props)
    this.state = {
        clicked: false  
    }    
    
    // Отец
    // передаем родителю 
    // Provider
    <ClickContext.Provider value={this.state.clicked}>
        <Counter/>
    </ClickContext.Provider>

        //  ребенок
        // Consumer
        <ClickContext.Consumer>
            {clicked => clicked ? <p> Clicked</p> : null}  
        </ClickContext.Consumer>

jsx Референции

Референциииспользуютсядляплагинов，фокусаинестандартныхмоментов

ref

// ПЕРВЫЙ МЕТОД
componentDidMount() {
    if (this.props.index ===1)
    this.inputRef.focus()
}


<React.Fragment>
    <input 
        ref={(inputRef) => this.inputRef = inputRef}
        type="text" 
        value={this.props.name} 
    />
</React.Fragment>


// ВТОРОЙ МЕТОД

constructor(props) {
    super(props)

    this.inputRef = React.createRef()
} 
componentDidMount() {
    if (this.props.index ===1)
    this.inputRef.current.focus()
}

<React.Fragment>
    <input 
        ref={this.inputRef}
        type="text" 
        value={this.props.name} 
    />
</React.Fragment>

jsx 丙种

npm i prop-types

prop-types

import PropTypes from 'prop-types'

...

Car.propTypes = {
    name: PropTypes.string.isRequired,
    year: PropTypes.number,
    onChangeName: PropTypes.func,
    onDelete: PropTypes.func
}

export default withClass(Car, classes.car)

jsx Компонентывысшегопорядка

Суть特别сводитсяктомучтобыоборачиватькомпонентыидобавлятьсвойфункционал Можемсоздаватьихдвумяспособами， - каккомпонеты反应ивозвращатьprops.children（напримерErrorBoundary）https://snippets.cacher.io/snippet / 7f721331d75d3ebf46c3 - иликакф-ии，котораявозващаетф-июкаквданномслучае вданномслучаедобвленмассивклассовclasses.car，которыймыпередаливдочернийкомпонент（38строка） PSИменнотакимобразом（компонентомвысшимпорядком）иработалкомпонентRadium（манипуляциисinlineCSS）

hoc

import React from 'react'

const withClass = (Component, classes) => {
  return ({...props}) => 
    <div className={classes}>
      <Component {...props}/>
    </div>
}

export default withClass

// import React from 'react'

// export default (WrappedComponent, classes) => {
//     return ({ ...props} ) =>  
//         <div className={classes}> <WrappedComponent  {...props } />  </div>
// }



////  ДОЧЕРНИЙ ЭЛЕМЕНТ
... 
        return (
            <React.Fragment>
                <h3>Car name: {this.props.name}</h3>
                <p>Year <strong>{this.props.year}</strong></p>
                <input 
                    type="text" 
                    value={this.props.name} 
                    onChange={this.props.onChangeName} 
                />
            </React.Fragment>
        );
    }
}


export default withClass(Car, classes.car)

jsx Правильноеизминение州

的setStateэтоасинхронныйметод Теситуациикогдамыиспользуем状态，ноонизменилсявдругомместе（напримерасинхронно）анамнеобходимоосновыватьсянаегоТЕКУЩЕМсостоянии，тоиспользуем功能 Ноеслимыувереннычто никакогоасинхроннноговмешательстовавизминении状态небудеттоможноиспользоватьпервыйпожходХотявторойподходболеебезопасныйиправильный

right edit state

addCounter = () => {
    // this.setState({
    //     counter: this.state.counter + 1
    // })
    this.setState((prevState) => {
        return {
            counter: prevState.counter +1
        }
    })
}

jsx 自定义React.fragment

<div>Избавляемсяотобертки<div>

custom React.fragment

export default  (props) => {
    return props.children
}



// оборачиваем дочерний элемент
import Auxiliary from '../Auxiliary/Auxiliary'
...
render() {
    return (
        <Auxiliary>
            <h2>Counter {this.state.counter}</h2>
            <button onClick={this.addCounter}>+</button>
            <button onClick={()=> this.setState({counter: this.state.counter-1})}>-</button>
        </Auxiliary>
    )
}

jsx React Fragment（избавляемсяот“ненужной”фложенности）

fragment

<React.Fragment>
    <h2>Counter {this.state.counter}</h2>
    <button onClick={this.addCounter}>+</button>
    <button onClick={()=> this.setState({counter: this.state.counter-1})}>-</button>
</React.Fragment>

jsx ErrorBoundlyКомпонентобертка

Таккакмыможемодинкомпонентвстраиватьвдругой（каквложенностьHTML）ипотомполучатьчерез道具 返回this.props.children， ИтогдародительскийкомпонентсметодомcomponentDidCatchпомогаетотловитьошибкивдочернемэлементе подробнеетутhttps：//reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

errorBoudly

<ErrorBoundary key={index}>
    <Car  name={car.name} />
</ErrorBoundary>


// ---- 

import React, { Component } from 'react'

export default class ErrorBoundary extends Component {

    state = { hasError: false }  

    // данный метод будет вызван если его дети выхватят ошиюку
    // т е это обертка !
    componentDidCatch(error, info) {
        this.setState({hasError: true})
    }

    render() {
        if (this.state.hasError) {
            return <h1 style={{color: 'red'}}> Something went wrong </h1>
        }
        return this.props.children
    }
}

jsx 超级вметоде构造函数

Укласса应用хотимсделатьманипуляциюс道具в构造 Таккакмынаследуемсяоткомпонента组件тодлятогочтобвызватьиегометод构造мы 超вызываемвкоторыйтакжепередаемсвойства

super

class App extends Component {

    constructor(props) {
        super(props)
    }

...

jsx JS，МанипулированиестилиямиизJS

ДляманипуляцийстилиямиизJSиспользуетсябиблиотека镭https://formidable.com/open-source/radium/ - подключаетсяккомпоненту - производитманипуляциииприсвоениестилей - оборачиваеткомпонентнаэкспорте $ b $bМожетеещеподключитьпакетcolor:)

style from JS

import React from 'react'
import Radium from 'radium'
import './Car.sass'

const car = (props) => {


    const style = {
        boxShadow: '2px 4px 8px',
        ':hover': {
            transform: 'translateY(-10px)',
            boxShadow: '4px 8px 16px'
        }
    }
    
    return (
        <div className="car">
            <h3>Car name: {props.name}</h3>
            <p>Year <strong>{props.year}</strong></p>
        </div>
    );
}

export default Radium(car)