Основы React — useState и Prop drilling

В этой статье мы рассмотрим некоторые основные возможности React. Мне удалось разобраться в нескольких концепциях React, создав простое приложение (Выбор цвета). В этой статье будут описаны концепции с объяснением того, как было создано приложение.

Есть четыре концепции, которые будут рассмотрены в этой статье:

функциональные компоненты React
хук useState
Управляемый ввод
Сверление реквизита

Содержание

Функциональные компоненты React
хук useState
Управляемый ввод и сверление реквизитов

Функциональные компоненты React

В современном React используются функциональные компоненты. При создании этого приложения для выбора цвета используются два компонента, которые импортируются в основной компонент App.js. Этими компонентами являются:

Компонент Box
Компонент Input

// The App.js main component

import Box from "./Box";
import Input from "./Input";

function App() {
  return (
    <div className="App">
      <Box />
      <Input />
    </div>
  );
}

export default App;

Вход в полноэкранный режим Выход из полноэкранного режима

// The Input component

const Input = () => {
  return <input autoFocus placeholder="Enter color here" />;
};

export default Input;

Войти в полноэкранный режим Выход из полноэкранного режима

// The Box component

const Box = () => {

  return (
    <div>
      <div style={
          margin:'auto',
          width:'500px',
          height:'100px',
          border:'1px solid #000',
          textAlign: 'center',
          backgroundColor: green
      }></div>

    </div>

  )

};

export default Box;

Ввести полноэкранный режим Выход из полноэкранного режима

Обратите внимание, что цвет компонента Box по умолчанию установлен на зеленый. В следующем разделе мы будем использовать хук useState, чтобы избежать жесткого кодирования цвета фона.

хук useState

Мы будем использовать хук useState для установки начального цвета пустоты. Идея заключается в том, чтобы принять ввод от пользователя для установки цвета. Затем пользовательский ввод будет использоваться для изменения цвета поля в следующем разделе.

import Box from "./Box";
import Input from "./Input";

import React, { useState } from "react";

function App() {
  const [color, setColor] = useState("");

  return (
    <div className="App">
      <Box />
      <Input />
    </div>
  );
}

export default App;

Вход в полноэкранный режим Выход из полноэкранного режима

Управляемый ввод и сверление реквизитов

Хук useState и функция onChange будут написаны в главном компоненте App.js, который выступает в качестве родительского компонента в нашем приложении. Мы будем передавать эти свойства нашим дочерним компонентам. Таким образом, компоненты Box и Input смогут использовать хук useState и функцию onChange.

Также обратите внимание на то, что делает наша функция onChange. Она принимает значение из события и использует хук для изменения значения цвета. Мы также установим значение события с помощью пользовательского ввода. Значение ввода также будет установлено на цвет, который является крючком. Это сделает наш ввод управляемым вводом.

import Box from "./Box";
import Input from "./Input";

import React, { useState } from "react";

function App() {
  const [color, setColor] = useState("");

  const onChange = (e) => {
    setColor(e.target.value);
  };

  return (
    <div className="App">
      <Box color={color} />
      <Input onChange={onChange} color={color} />
    </div>
  );
}

export default App;

Вход в полноэкранный режим Выход из полноэкранного режима

const Input = ({ onChange, color }) => {
  return (
    <input
      autoFocus
      onChange={onChange}
      placeholder="Enter color here"
      value={color}
    />
  );
};

export default Input;

Вход в полноэкранный режим Выход из полноэкранного режима


const Box = ({color}) => {


  return (
    <div>
      <div style={
          margin:'auto',
          width:'500px',
          height:'100px',
          border:'1px solid #000',
          textAlign: 'center',
          backgroundColor: color
      }>{color?color:"This is empty"}</div>

    </div>

  )

};

export default Box;

Войти в полноэкранный режим Выход из полноэкранного режима