«Это первый день моего участия в Gengwen Challenge, пожалуйста, ознакомьтесь с подробностями мероприятия:Обновить вызов"
предисловие
При поиске работы я обнаружил, что некоторые компании используют React как стек технологий, и зарплата хорошая.Чтобы увеличить козырь выживания, мне все равно нужно изучить React и добавить навык выживания. Поскольку я разрабатываю проекты с Vue2.0 уже четыре года, я использую идеи разработки проектов с Vue2.0 для изучения React.
Интерфейсный проект состоит из страниц, для Vue страница состоит из нескольких компонентов, а сама страница также является компонентом маршрутизации. То же самое верно и для React. Vue предоставит серию технической поддержки для завершения разработки компонента.Вы можете начать с этой серии технической поддержки и перейти к React, чтобы найти соответствующую техническую поддержку для начала работы с React, например, как разработать пользовательский интерфейс компонентов в React, как использовать компоненты в React, как определить данные компонента в React и так далее.
Эта колонка поможет вам начать работу с React17 из Vue2.0 в соответствии с этим направлением мышления.
1. Леса
Прежде всего, вам нужно выбрать скаффолд для сборки проекта React.В React много скаффолдов.Почему в качестве скаффолда выбирают UmiJS?Нет, этот скаффолд похож на Vue Cli, по крайней мере конфигурация маршрутизации очень похожа на Vue Router.
Прежде чем учиться, создайте проект React с помощью UmiJS. Шаги очень просты:
- Сначала найдите место для создания пустого каталога, откройте инструмент командной строки и выполните команду
mkdir myapp && cd myapp; - Выполнение заказа
npm create @umijs/umi-appСоздайте проект React; - Выполнение заказа
npm installустановить зависимости; - После успешной установки зависимостей выполните команду
npm run startЗапустите проект, откройте его в браузереhttp://localhost:8000Получите доступ к проекту.
Вы можете видеть, что структура каталогов проекта React myapp выглядит следующим образом:
.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
├── .umi
├── layouts/index.tsx
├── pages
├── index.less
└── index.tsx
└── app.ts
Откройте файл .umirc.ts со следующим содержимым
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
],
fastRefresh: {},
});
Его маршрут находится вroutesКонфигурация в параметрах очень похожа на конфигурацию Vue Router.Конкретная конфигурация будет представлена позже при переходе маршрутизации и передаче параметров.
следующий вsrc/pages/index.tsxФайл в письменном виде для изучения React.
2, Реагируйте, как разрабатывать компоненты пользовательского интерфейса
Все, что разработано в Vue и React, является компонентом, и его страница также является компонентом маршрутизации. Компоненты в Vue определяются с суффиксом как.vueфайл, в React компоненты определяются с суффиксом.jsВ файле, если вы используете TypeScript для разработки React, его компоненты определены в суффиксе.tsxв файле.
Как разработать часть пользовательского интерфейса компонента, например, разработать компонент HelloWorld для отображения на странице браузера.hello world, пользовательский интерфейс компонента состоит из частей HTML и частей CSS.
2.1 HTML-раздел
Для HTML-части компонента Vue рекомендует использовать шаблон шаблона, а React рекомендует использовать синтаксис JSX.
в инженерииsrc/pagesсоздать папкуHelloWorld.jsфайл, в котором разработан компонент HelloWorld.
Кроме того, существует два способа определения компонентов React: один — в форме функции, а другой — в форме класса ES6.
Функциональная форма, называемая функциональным компонентом:
export default function HelloWorld() {
return (
<div>hello world</div>
);
}
Форма класса ES6, называемая компонентом класса:
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>hello world</div>
);
}
}
Обратите внимание, что первая буква имени функции должна быть заглавной.. в функцииreturnПользовательский интерфейс компонента разрабатывается позже с использованием синтаксиса JSX.
Также обратите внимание, чтоreturnСледующее содержимое следует использовать в самых крайних местах.()сконден, иначе вreturnЗа той же строкой следует хотя бы один<может быть следующим:
export default function HelloWorld() {
return <
div>hello world</div>
}
Не выглядит ли это странно, поэтому лучше добавить().
2.2 Класс привязки и стиль
Что касается CSS-части сборки, самое главное - связать класс и стиль, вы можете добавлять стили в компонент HTML.
Первый взгляд на класс и стиль исправлен, React является обязательным.
export default function HelloWorld() {
return (
<div
className="title head"
style={{color:'red',fontSize:'16px'}}
>
hello world
</div>
);
}
Реагировать используетсяclassNameЧтобы связать класс, используйтеstyleдля привязки стиля. вstyleПринятое значение является объектом и используется с{}Квадратные скобки передаются, а имена свойств объектов могут быть названы только в camelCase.
Давайте посмотрим, как Class и Style являются переменными и как они связаны в React.
- Написание компонента класса:
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
styleData: { color: 'red', 'fontSize': "16px" },
isHead: true,
className: 'title'
};
}
render() {
return (
<div
className={`${this.state.className} ${this.state.isHead ? 'head' : ''}`}
style={this.state.styleData}
>
hello world
</div>
);
}
}
- Написание функциональных компонентов:
import { useState } from 'react';
export default function HelloWorld() {
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
return (
<div
className={`${className} ${isHead ? 'head' : ''}`}
style={styleData}
>
hello world
</div>
);
}
В React нужно использовать{}присвоение переменной свойству иclassNameПринимаются только строки, а не массивы или объекты.Вы можете использовать строковую функцию шаблона ES6 для объединения переменных для создания строк.
Используется при написании функциональных компонентовuseStateЭтот React Hook определяет некоторые переменные,useStateРоль будет описана позже.
3. Как использовать компоненты в React
Компонент HelloWorld написан, как его использовать? Давайте сначала рассмотрим, как использовать компоненты в Vue.Перед использованием компонентов вы должны зарегистрировать их, которые могут быть зарегистрированы как глобальные или локальные компоненты.
В React нет понятия регистрации компонентов, потому что компоненты — это вполне себе функция, только понятие внедрения компонентов, а понятия глобальных компонентов нет. необходимо использовать перед использованием компонентаimportСначала импортируйте компонент и назовите его.
import HelloWorld from './HelloWorld.js'
export default function Index(){
return (
<HelloWorld/>
)
}
Имена компонентов в React должны начинаться с заглавной буквы, потому что React рассматривает компоненты, начинающиеся со строчной буквы, как собственные теги DOM..
4. Как определить данные компонента в React
Из опыта разработки компонентов Vue данные компонента можно разделить на внутренние данные и данные параметров. То же самое верно и для React.В React внутренние данные называются состоянием, а данные параметров называются реквизитами.
4.1 Определение состояния внутренних данных
Процесс привязки переменных форм класса и стиля в React был определен выше.styleData,isHead,classNameэти внутренние данные.
- в классе компонент находится в
this.stateДанные определены в этом объекте:
this.state = {
styleData: { color: 'red', 'fontSize': "16px" },
isHead: true,
className: 'title'
};
- Используется при написании функциональных компонентов
useStateЭтот React Hook определяет данные:
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
Лично рекомендую использовать функциональную форму для разработки компонентов React, вы можете использовать React Hook, чтобы не изучать синтаксис класса в ES6, а также раздражатьthisУкажите на проблему, тем самым уменьшив трудность входа.
О React Hook можно посмотретьздесь.
4.2 Определение свойств данных параметров
props используются для получения внешних данных, передаваемых компоненту. Например, определено в компоненте HelloWorldtitleДанные параметра.
- Написание компонента класса:
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>{this.props.title}</div>
);
}
}
HelloWorld.defaultProps = {
title: 'hello world'
};
export default HelloWorld;
Конструктор в компоненте классаconstructorприниматьpropsПоскольку сбор данных параметров передается в компонент, и вызовsuper(props)Пучокpropsперейти кReact.ComponentКонструктор, чтобы компоненты класса могли принимать набор данных параметровprops, затем используйтеthis.props.titleчитатьtitleЗначение данных параметра, в противном случае вы можете использоватьdefaultPropsопределятьtitleЗначение по умолчанию для данных параметра.
- Написание функциональных компонентов:
import { useState } from 'react';
export default function HelloWorld(props) {
const {title = 'hello world'} = props;
return (
<div>{title}</div>
);
}
Функциональный компонент получаетpropsВ качестве набора входящих данных параметров компонента функция деструктурирования и назначения ES6 используется для получения данных параметров компонента, и для данных параметров может быть установлено значение по умолчанию.
Обратите внимание здесь, который используется в шаблоне шаблона Vue{{}}(двойные фигурные скобки) для использования данных, а в React он используется единообразно{}(одиночные фигурные скобки) для использования данных.
Параметр data Props используется для получения данных, передаваемых компоненту извне, так как же передать данные компоненту в React?
5. Как передавать данные компонентам в React
В Vue указано, как динамические данные и статические данные строки, числа, логического значения, массива и типа объекта передаются компонентам Давайте узнаем, как передать это в React.
- Передавать динамические данные
import { useState } from 'react';
import HelloWorld from './HelloWorld.js';
export default function Index(){
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
return (
<HelloWorld
styleData={styleData}
isHead={isHead}
className={className}
/>
)
}
- Передать статические данные типа string
<HelloWorld title="hello vue"></HelloWorld>
- Передайте статические данные типа number
<HelloWorld num={1}></HelloWorld>
- Передать статические данные логического типа
<HelloWorld isHead={false}></HelloWorld>
- Передать статические данные типа массив
<HelloWorld className={['title','head']}></HelloWorld>
- Передать статические данные типа объекта
<HelloWorld styleData={{color:'red','fontSize':"16px"}}></HelloWorld>
Видно, что в React помимо передачи статических данных строкового типа необходимо использовать{}Затем завернутые данные назначаются свойствам тега компонента для передачи данных компоненту.
6. Как слушать события DOM в React
6.1 Прослушивание событий DOM элементов DOM
- Написание компонента класса:
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('点击事件');
}
render() {
return (
<div onClick={this.handleClick}>hello world</div>
);
}
}
- Написание функциональных компонентов:
export default function HelloWorld() {
const handleClick = ()=>{
console.log('点击事件');
}
return (
<div onClick={handleClick}>hello world</div>
);
}
Используется в реакцииonClickЧтобы прослушивать события кликов, используйте{}Оберните функцию, выполняемую при срабатывании события щелчка, а затем назначьте ееonClick.
вonClickсинтетическое событие в Vue@Затем следуют нативные события DOM, а в ReactonЗа ними следуют события, которые не являются родными для DOM. Например, прослушивание событий двойного щелчка в Vue.@dblclick, в то время как React прослушивает события двойного щелчкаonDoubleClick.
Синтетические события в React можно увидеть в деталяхздесь.
6.2 Прослушивание событий DOM компонентов React
использовать во Вью.nativeМодификатор для прослушивания событий DOM в компонентах, то есть как прослушивать события DOM в компонентах в React.
Например, чтобы отслеживать событие щелчка в компоненте, сначала передайте функцию, которая будет выполняться, когда событие щелчка инициируется как свойство компонента, прослушивайте событие щелчка в корневом элементе компонента и выполняйте свойство, когда событие щелчка запускается, чтобы косвенно отслеживать компонент в событии щелчка. Конкретная реализация выглядит следующим образом:
- Написание компонента класса:
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props:any) {
super(props);
console.log(this.props)
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.props.onClick();
}
render() {
return (
<div onClick={this.handleClick}>hello world</div>
);
}
}
import React from 'react';
import HelloWorld from './HelloWorld';
export default class Grandfather extends React.Component {
handleClick() {
console.log('点击事件');
}
render() {
return (
<HelloWorld onClick={() => { this.handleClick() }}>
</HelloWorld>
)
}
}
- Написание функциональных компонентов:
export default function HelloWorld(props) {
const { onClick } = props
const handleClick = () => {
onClick();
}
return (
<div onClick={handleClick}>hello world</div>
);
}
import HelloWorld from './HelloWorld';
export default function Index(){
const handleClick = ()=>{
console.log('点击事件');
}
return (
<HelloWorld onClick={() => { handleClick() }}>
</HelloWorld>
)
}
7. Как компоненты меняют данные в React
Как описано выше, данные компонентов React делятся на внутреннее состояние данных и свойства данных параметров, и соответствующие методы изменения также различаются.
7.1 Изменение состояния внутренних данных
Например, чтобы изменить внутренние данные, определенные в компонентеtitle.
- Написание компонента класса:
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'hello world',
className: 'title'
};
// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
title: 'hello react',
className: 'title active'
}));
}
render() {
return (
<div
className={className}
onClick={this.handleClick}
>{title}</div>
);
}
}
существуетthis.setState()Можно передать функцию или объект, рекомендуется передать функцию(state,props) =>{}, функция может принимать внутреннее состояние данных и реквизиты данных параметров в качестве параметров, иstateа такжеpropsТолько чтение не может быть изменено, каждый вызовthis.setStateСостояние и реквизиты, прочитанные в то время, являются последними, особенно подходящими для нескольких вызовов.this.setStateИзмените сцену того же состояния. Наконец, функция возвращает объект, содержимое которого является изменяемым состоянием.
- Написание функциональных компонентов:
import { useState } from 'react';
export default function HelloWorld() {
const [title,setTitle] = useState('hello world');
const [className,setClassName] = useState('title');
const handleClick = () =>{
setTitle('hello react');
setClassName('title active')
}
return (
<div
className={className}
onClick={handleClick}
>
{title}
</div>
);
}
Он сказал, что внутренние данные для состояния в React используютuseState(param)При определении состояния вы можете передавать параметрыparamУстановите значение состояния по умолчанию, которое возвращает массив, первое значение массива — это состояние, а второе значение массива — это функция, которая изменяет состояние, которую можно вызвать для изменения состояния.
дополнительно использоватьuseStateОпределенные данные являются адаптивными. Если страница использует данные, страница будет повторно отображаться после изменения данных.
7.2 Изменить свойства данных параметров
Как и в Vue, вы не можете напрямую изменять реквизиты в компонентах.Если вы хотите изменить реквизиты, вы можете изменить реквизиты только косвенно, изменив данные, передаваемые дочернему компоненту в родительском компоненте.Как разрешить родительскому компоненту изменяться в дочернем компоненте и передать его дочернему. Что касается данных компонентов, мы познакомим вас с тем, как взаимодействовать между родительским и дочерним компонентами в React.
8. Как общаться между родительными и дочерними компонентами в реакции
Описано на примере, если компонент HelloWorld "hello world" с параметром data propstitleКак показано, он становится «hello React», когда нажимается кнопка изменения заголовка в компоненте.
- Написание компонента класса:
import React from 'react';
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.handleChangeTitle=this.handleChangeTitle.bind(this);
}
handleChangeTitle(){
this.props.changeTitle('hello React');
}
render() {
return (
<div>
{this.props.title}
<button
onClick={this.handleChangeTitle.bind(this)}>
改变标题
</button>
</div>
);
}
}
HelloWorld.defaultProps = {
title: 'hello world'
};
export default HelloWorld;
import HelloWorld from './HelloWorld.js'
import React from 'react'
class Index extends React.Component {
constructor(props) {
super(props);
this.state={
info:'hello world'
};
this.handleChangeTitle=this.handleChangeTitle.bind(this);
}
handleChangeTitle(data){
this.setState(state =>{
return {
info:data
}
})
}
render() {
return (
<HelloWorld
title={this.state.info}
changeTitle={this.handleChangeTitle}>
</HelloWorld>
);
}
}
export default Index;
- Написание функциональных компонентов:
export default function HelloWorld(props: any) {
const { title = 'hello world', changeTitle } = props;
const handleChangeTitle = () => {
changeTitle('hello React')
}
return (
<div>
{title}
<button onClick={handleChangeTitle}>改变标题</button>
</div>
);
}
import { useState } from 'react'
import HelloWorld from './HelloWorld.js'
export default function Index(){
const [info,setInfo] = useState('hello world');
const handleChangeTitle = (data)=>{
setInfo(data);
}
return (
<HelloWorld title={info} changeTitle={handleChangeTitle}/>
)
}
В родительском компоненте определитеinfoданные, передаваемые дочерним компонентамtitleданные параметра, а также определяет функцию обратного вызоваhandleChangeTitleизменитьinfoданные и передать функцию обратного вызова дочернему компонентуchangeTitleданные параметра.
такие подкомпонентыchangeTitleДанные параметра можно вызвать как функцию, вызвавchangeTitleкогда звонятhandleChangeTitleФункция обратного вызова, значения могут быть изменены с помощьюdataПараметры функции передаются, а затем выполняютсяsetInfo(data)Изменятьinfoданные, которые затем передаются дочернему компонентуtitleданные параметра, косвенно измененныеtitleДанные параметров, которые реализуют, как компоненты в React изменяют данные параметров.
Его также можно вызвать в родительском компонентеsetInfoИзменения, переданные дочерним компонентамtitleданные параметраinfoДанные выше — это метод связи между родительским и дочерним компонентами в React.
9. Как отслеживать изменения данных компонента в React
В Vue вы можете просто использоватьwatchМониторить изменения данных в React сложнее, и методы реализации разные для разных типов подкомпонентов.
- Написание компонента класса:
использовать в компонентах классаcomponentDidUpdateЭтот метод жизненного цикла реализуется при первом отображении метода.componentDidUpdateНе будет выполняться, будет срабатывать при последующих изменениях свойств и состояния.componentDidUpdate, который принимает первый аргументprevPropsПредставляет реквизит до изменения, второй параметрprevStateПредставляет состояние до изменения.
componentDidUpdate(prevProps, prevState){
if(prevProps.title !== this.props.title){
console.log('props中的title数据改变了');
}
if(prevState.info !== this.state.info){
console.log('state中的info数据改变了');
}
}
- Написание функциональных компонентов
В функциональном компоненте вы можетеuseEffectЭтот React Hook прослушивает изменения данных, но он не может быть таким, как Vue.watchВозможность получения старых данных перед изменениями. Итак, вам нужно настроить хук для реализации чего-то вроде Vue.watchфункция. Пользовательский хук — это функция, имя которой начинается с «использовать», и внутри функции могут быть вызваны другие хуки. Поэтому этот пользовательский хук называетсяuseWatch.
Как получить старые данные перед изменением, это может сработать при первом изменении данныхuseWatchИспользуйте контейнер для хранения старых данных и активируйте его в следующий разuseWatchСтарые данные перед изменением получаются путем чтения значения в контейнере чтения. Контейнер можно использоватьuseRefКрючок создан.
useRef возвращает изменяемый объект ref, свойство .current которого инициализируется переданным параметром (initialValue). Возвращенный объект ref сохраняется на протяжении всего времени существования компонента.
import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
const oldValue = useRef();
useEffect(() =>{
callback(value,oldValue.current);
oldValue.current=value;
},[value])
}
ноuseEffectбудет вызываться один раз после первого рендеринга компонента, в результате чегоcallbackФункция обратного вызова будет выполнена один раз, и в VuewatchиспользуетсяimmediateКонфигурация для управления выполнением сразу после первоначального рендеринга компонентаcallbackФункция обратного вызова и не будет выполняться по умолчанию после первого рендеринга компонента.callbackфункция обратного вызова, затем вhook.jsопределитьuseWatch.
Сначала поймите, что первый рендеринг компонента не выполняетсяcallbackПерезвоните.
import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
const oldValue = useRef();
const isInit = useRef(false);
useEffect(() =>{
if(!isInit.current){
isInit.current = true;
}else{
callback(value,oldValue.current);
}
oldValue.current=value;
},[value])
}
добавить сноваimmediateКонфигурация для управления выполнением сразу после первоначального рендеринга компонента.callbackПерезвоните.
import {useEffect,useRef} from 'react';
export function useWatch(value,callback,config={immediate: false}){
const oldValue = useRef();
const isInit = useRef(false);
useEffect(() =>{
if(!isInit.current){
isInit.current = true;
if(config.immediate){
callback(value,oldValue.current);
}
}else{
callback(value,oldValue.current);
}
oldValue.current=value;
},[value])
}
Дополнительноwatchтакже возвращаетunwatchфункция, вызовunwatchФункция может перестать прослушивать эти данные.
import { useEffect, useRef } from 'react';
export function useWatch(value, callback, config = { immediate: false }) {
const oldValue = useRef();
const isInit = useRef(false);
const isWatch = useRef(true);
useEffect(() => {
if (isWatch.current) {
if (!isInit.current) {
isInit.current = true;
if (config.immediate) {
callback(value, oldValue.current);
}
} else {
callback(value, oldValue.current);
}
oldValue.current = value;
}
}, [value])
const unwatch = () => {
isWatch.current = false;
};
return unwatch;
}
useWatchПосле того, как этот хук определен, используйте его следующим образом.
export {useState} from 'react';
export {useWatch} from './hook.js';
export default function HelloWorld() {
const [title,setTitle] = useState('hello world')
useWatch(title, (value, oldValue) => {
console.log(value);
console.log(oldValue)
})
const handleChangeTitle = () => {
setTitle('hello React')
}
return (
<div onClick={handleChangeTitle}>{title}</div>
);
}
10. Как родительский компонент вызывает метод дочернего компонента в React
В Vue нужно использоватьrefДайте подкомпоненту идентификационный идентификатор, а затем используйтеthis.$refs[ID]Получите доступ к объекту экземпляра этого подкомпонента, а затем вызовите метод подкомпонента через объект экземпляра. В React это сложнее, и способы реализации разных типов подкомпонентов тоже разные.
- Написание подкомпонента класса:
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
title:'hello World'
};
}
handleChangeTitle(){
this.setState({
title:'hello React'
});
}
render() {
return (
<div>
{this.state.title}
</div>
);
}
}
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component {
constructor(props) {
super(props)
this.myCom = React.createRef();
this.changeTitle = this.changeTitle.bind(this);
}
changeTitle() {
this.myCom.current.handleChangeTitle();
}
render() {
return (
<div>
<HelloWorld ref={this.myCom} />
<button onClick={this.changeTitle}>改变标题</button>
</div>
)
}
}
export default Index;
- Написание функциональных компонентов:
useRef()Нельзя использовать в функциональных компонентах, вы должны сначала использовать их в функциональных компонентах.useImperativeHandleПримеры значений определены для воздействия на родительский элемент, входящий дополнительный компонент должен функционироватьforwardRefПосле обработки потом выводят.
import { useState, forwardRef, useImperativeHandle } from 'react';
const HelloWorld = (props, ref) => {
const [title, setTitle] = useState('hello World');
useImperativeHandle(ref, () => ({
handleChangeTitle: () => {
setTitle('hello React')
},
}));
return (
<div>{title}</div>
);
}
export default forwardRef(HelloWorld)
import { useRef } from 'react'
import HelloWorld from './HelloWorld.js'
export default function Index() {
const myCom = useRef();
const changeTitle = () => {
myCom.current.handleChangeTitle();
}
return (
<div>
<HelloWorld ref={myCom} />
<button onClick={changeTitle}>改变标题</button>
</div>
)
}
11. Как реализовать слоты компонентов в React
11.1 Общие слоты
На самом деле в React нет понятия слотов, но его можно использоватьprops.childrenреализовать функцию слота.
Каждый компонент может получить props.children. Он содержит содержимое между открывающим и закрывающим тегами компонента.
Например, чтобы разработать компонент HelloWorld для отображения «hello World», его также можно реализовать в виде слота черезprops.childrenПередайте «hello World» из родительского компонента.
Написание компонента класса:
import React from 'react';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
render() {
return (
<HelloWorld>hello World</HelloWorld>
)
}
}
export default Index;
Написание функциональных компонентов:
export default function HelloWorld(props){
const {children}=props;
return (
<div>
{children}
</div>
);
}
import HelloWorld from './HelloWorld.js';
export default function Index(){
return (
<HelloWorld>hello World</HelloWorld>
)
}
11.2 Именованные слоты
Вы можете передать функцию дочернему компоненту через реквизиты.Если функция наконец возвращает элемент React, элемент React написан в синтаксисе JSX, который косвенно реализует функцию именованных слотов.
Например, компонент HelloWorld разработан для отображения «hello World», который реализован в виде именованных слотов.
Написание компонента класса:
import React from 'react';
class HelloWorld extends React.Component{
constructor(props){
super(props)
this.elementSlot = "";
if (this.props.element) {
this.elementSlot = this.props.element();
}
}
render(){
return (
<div>
{this.elementSlot}
</div>
);
}
}
export default HelloWorld;
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
info(){
return(
<span>hello World</span>
)
}
render() {
return (
<HelloWorld element={this.info}></HelloWorld>
)
}
}
export default Index;
Написание функциональных компонентов:
export default function HelloWorld(props) {
const { children, element } = props;
let elementSlot = "";
if (element) {
elementSlot = element();
}
return (
<div>
{elementSlot}
</div>
);
}
import HelloWorld from './HelloWorld.js';
export default function Index(){
const info = () =>{
return (
<span>hello World</span>
)
}
return (
<HelloWorld element={info}></HelloWorld>
)
}
11.3 Слоты с заданной областью действия
Роль слотов с ограниченной областью Vue заключается в записи содержимого слота в родительский компонент с данными в дочерний компонент.
Вспоминая процесс реализации слота имени маски выше, сначала определите функцию в родительском компоненте, функция может вернуть элемент React, затем передайте функцию дочернему компоненту через свойства, выполните функцию в дочернем компоненте и добавьте результат выполнения в элемент React дочернего компонента.
Если эта функция выполняется в дочернем компоненте, данные дочернего компонента передаются в качестве параметра, то функция может использоваться в родительском компоненте для получения данных дочернего компонента для записи элемента React (содержимое слот). Это реализует слоты с ограниченной областью действия.
Например, разработайте компонент HelloWorld для отображения «запись именованного слота hello World с данными подкомпонента», который реализован в виде слотов с заданной областью действия.
Написание компонента класса:
import React from 'react';
class HelloWorld extends React.Component{
constructor(props){
super(props)
this.state = {
info:'用子组件的数据写具名插槽 hello World'
}
this.elementSlot = "";
if (this.props.element) {
this.elementSlot = this.props.element(this.state.info);
}
}
render(){
return (
<div>
{this.elementSlot}
</div>
);
}
}
export default HelloWorld;
import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
constructor(props) {
super(props);
}
info(data){
return(
<span>{data}</span>
)
}
render() {
return (
<HelloWorld element={this.info}>
</HelloWorld>
)
}
}
export default Index;
Написание функциональных компонентов
import { useState } from "react";
export default function HelloWorld(props) {
const { children, element } = props;
const [info] = useState('用子组件的数据写具名插槽 hello World')
let elementSlot = "";
if (element) {
elementSlot = element(info);
}
return (
<div>
{elementSlot}
{children}
</div>
);
}
import HelloWorld from './HelloWorld.js';
export default function Index(){
const info = (data) =>{
return (
<span>{data}</span>
)
}
return (
<HelloWorld element={info}></HelloWorld>
)
}
резюме
Вышеизложенное относится к технологии, которую Vue будет использовать для разработки компонента, и с точки зрения поиска соответствующего решения для реализации в React, чтобы начать работу с React.После прочтения вы сможете разработать несколько простых страниц с помощью React и иметь возможность делить страницу на компоненты и данные взаимодействия между компонентами. В следующей статье будет рассказано о разработке компонентовКак эти часто используемые директивы в Vue реализованы в React.