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

jsx Добавлениеклассоввзависимостиотусловийвкомпонент

- Компонентпринимаетprops.name（оноформируетсяоттогочтоввелпользователь，данныевсплываеюткродителю，меняют状态испускаютсяввидепропсов） - Проверяемнадлинуипустотуивзависимостиотэтогодобавляемвсозданныйнамимассивклассов（ inputClasses）тотилиинойкласс - ИтаккакclassNameнепринимаетмассив，мыделаемjoin（на25строке）

class dynamic add

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

const car = (props) => {
    const inputClasses = ['input']
    
    if (props.name !== '') {
        inputClasses.push('input_green')
    } else {
        inputClasses.push('input_red')
    }

    if (props.name.length > 4) {
        inputClasses.push('input_bold') 
    }
    
    return (
        <div className="car">
            <h3>Car name: {props.name}</h3>
            <p>Year <strong>{props.year}</strong></p>
            <input 
                type="text" 
                value={props.name} 
                onChange={props.onChangeName} 
                className={inputClasses.join(' ')}
            />
            <button onClick={props.onDelete}> Delete </button>
        </div>
    );
}

export default car

jsx Динамическиесписки

dinamic_list

// строки на которые обратить внимание (в той же последовательности) 48, 49, 31, 32, 5, 13,

// App.js

onChangeName(name, index) {
    const car = this.state.cars[index]
    const cars = [...this.state.cars]
    car.name = name
    cars[index] = car
    this.setState({cars})
}

deleteHandler (index) {
    const cars = [...this.state.cars]
    cars.splice(index, 1);
    this.setState({cars})
}

render() {
const divStyle = { 'textAlign': 'center','color': "#b1b1b1" }


let cars = null

if (this.state.showCars) cars = this.state.cars.map((car, index)=>{
    return (
        <Car 
            key={index}
            name={car.name} 
            year={car.year}
            onChangeName={ event => this.onChangeName(event.target.value, index)}
            onDelete={ this.deleteHandler.bind(this, index)}
        />
    )
}


// Car.js

const car = (props) => (
    <div style={{
        borderBottom: '1px solid #ccc',
        margin: '10px',
        padding: '10px'
    }}>
        <h3>Car name: {props.name}</h3>
        <p>Year <strong>{props.year}</strong></p>
        <input type="text" value={props.name} onChange={props.onChangeName} />
        <button onClick={props.onDelete}> Delete </button>
    </div>
);

jsx Работасусловнымиоператорами

更多信息，请访问

// первый метод (if в JSX запрещен)
{ this.state.showCars
    ? cars.map((car)=>{
            return (
            <Car 
                key={car.name}
                name={car.name} 
                year={car.year}
                onChangeTitle={() => this.changeTitleHandler(car.name)}
            />
            )
        }) 
    : null
}

// второй метод в зависимости от if в JSX выводим переменную
let cars = null

if (this.state.showCars) cars = this.state.cars.map((car)=>{
    return (
        <Car 
            key={car.name}
            name={car.name} 
            year={car.year}
            onChangeTitle={() => this.changeTitleHandler(car.name)}
        />
    )
}) 

return (
  <div style={divStyle}>

    <h1>{this.state.pageTitle} </h1>
    <button onClick={this.toglerCarsHandler} >Togle Cars</button>
  
    {cars}

  </div>
);

jsx Обработка输入（更改，事件，setState）

ЧтобизменитьсостояниеstateнеобходимовызватьметодsetState（{ params：“Тутточтохотимпоменять” }）

set_state

handleInput = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
}

render() {
    const cars = this.state.cars;

    return (
        <div>
            <h1>{this.state.pageTitle} </h1>
    
            <input 
              type="text"
              onChange={this.handleInput}
              
// ...

jsx 更多信息вф-июкомпонента

Отправилиметодотродителякребенкуипередалипараметр Двумяспособами： - Через绑定（менеересурсоемкийспособ||рекомендуется）//привязкаф-ииконтекстуивызовее - Стрелочнойф-ией //присобытиивызовстрелочнойф-ии，каждыйразновая ИТОГОдовольносомнительныйприроствпроизводительностиясклоняюсьиспользоватьстрелочнуюф-ию

give_away_method

changeTitleHandler (newTitle){
    this.setState({
      pageTitle: newTitle
    })
}
// или
changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
}

// Передаем метод к ребенку

<Car // через стрелочную ф-ию
    onChangeTitle={() => this.changeTitleHandler(cars[2].name)}  
    name={cars[0].name} />
    
<Car // через привязку к контексту 
    onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)} 
    name={cars[0].name} />

// Ребенок 

<div>
    <h3>Car name: {props.name}</h3>
    <button onClick={props.onChangeTitle}> click </button>
</div>

jsx 反应16生命周期

react16lifeciclye

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
        <script src="https://unpkg.com/react/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    </head>
    <div id="root"></div>
    <script type="text/babel">

      class MountingLifecycle extends React.Component {
        constructor() {
          // before component is mounted
        }
        getDerivedStateFromProps() {
          // invoked right after component is constructed
        }
        render() {
          // when first mounted
        }
        componentDidMount() {
          // right after component is mounted
        }
      }

      class UpdatingLifecycle extends React.Component {
        getDerivedStateFromProps() {
          // invoked right after component is receives new props
        }
        shouldComponentUpdate() {
          // if this returns false, then render() and componentDidUpdate() won't
          //   be called
        }
        render() {
          // when data changes
        }
        getSnapshotBeforeUpdate() {
          // right before most recently rendered output is rendered
        }
        componentDidUpdate() {
          // invoked right after update
        }
      }

      class UnmountingLifecycle extends React.Component {
        componentWillUnmount() {
          // invoked right before a component is unmounted
        }
      }

    </script>
</html>

jsx 基本页面

basic page

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
        <script src="https://unpkg.com/react/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    </head>
    <div id="root"></div>
    <script type="text/babel">

      const NowEating = props => <h1>{props.meal}</h1>

      class Menu extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            meal: "food"
          }
          this.addSideDish =this.addSideDish.bind(this);
        }
        addSideDish = () => {
          this.setState(prevState => {
            return { meal: `${prevState.meal} Changed`}
          })
        }
        render() {
          return (
            <div>
              <NowEating meal={this.state.meal} />
              {(this.state.meal === "food")
                ? <button onClick={this.addSideDish}>Click to change</button>
                : null
              }
            </div>
          )
        }
      }

      ReactDOM.render(
        <Menu />,
        document.getElementById('root')
      )

    </script>
</html>

jsx 基本形式

root

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
        <script src="https://unpkg.com/react/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    </head>
    <div id="root"></div>
    <script type="text/babel">

      class BaseForm extends React.Component {
        handleSubmit = e => {
          alert(this.input.value)
          e.preventDefault()
        }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                Message:
                <input type="text" ref={input => this.input = input } />
              </label>
              <button>
                Submit
              </button>
            </form>
          )
        }
      }

      ReactDOM.render(
        <BaseForm />,
        document.getElementById('root')
      )

    </script>
</html>

jsx Image.getSize不适用于静态图像

https://github.com/facebook/react-native/issues/5603

resolve-asset-soure.js

import resolveAssetSource from 'resolveAssetSource';
import image from './images/goat.png';
const {width, height} = resolveAssetSource(image);

jsx 如何在React Native中的文本组件中插入换行符？

https://stackoverflow.com/questions/32469570/how-can-i-insert-a-line-break-into-a-text-component-in-react-native

line-break-react.js

<Text>
Hi~{"\n"}
this is a test message.
</Text>