Компонент функции преобразования -> Компонент класса

Как преобразовать этот дополнение к функциям в компонент класса :

const SyncValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form className  = "formmailforbook" onSubmit = {handleSubmit(submit)}>

      <Field name = "email" type = "email" component = {renderField} label = "Email"/>
      <div>
        <button className  = "hero_button margin_left" type = "submit" disabled = {submitting}>Submit</button>
      </div>
    </form>
  )
}

reactjs components constants

06.06.2018 22:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Довольно простой перевод, вы можете выполнить ту же деструктуризацию пропа в методе render. Единственное небольшое изменение в том, что теперь он извлекается из this.props:

import React, { Component } from 'react';

export default class SyncValidationForm extends Component {
  render () {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <form className  = "formmailforbook" onSubmit = {handleSubmit(submit)}>

        <Field name = "email" type = "email" component = {renderField} label = "Email"/>
        <div>
          <button className  = "hero_button margin_left" type = "submit" disabled = {submitting}>Submit</button>
        </div>

      </form>
    )
  }
}

Когда я использую это решение, рендеринг приложения, но появляются ошибки: invariant.js: 42 Uncaught Error: addComponentAsRefTo (...): только ReactOwner может иметь ссылки. Возможно, вы добавляете ссылку на компонент, который не был создан внутри метода render компонента, или у вас загружено несколько копий React.

— 06.06.2018 23:09

06.06.2018 22:39

Это довольно просто ... скопируйте код в новый файл и добавьте export default перед const примерно так.

export default const SyncValidationForm

Импортируйте файл по мере того, как вы импортируете другие компоненты, где бы вы ни хотели компонент, и используйте импортированное имя как имя jsx как usal и предоставьте реквизиты.

06.06.2018 22:58

Другие вопросы по теме

Как заставить Matisse GUI отображать мои пользовательские добавленные компоненты?

Vue.js обертывающие компоненты с v-моделями

Реагировать на потерю входного фокуса со многими входами

Как мне перезаписать существующий компонент в angular?

Изменение целого числа, при котором setState не отображается при рендеринге

Undefined переменная React JS

Компонент рендеринга React redux внутри себя

SetState () перезагружает всю страницу вместо повторного рендеринга только компонента

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

Пытаюсь понять: импортировать React, {component} из React;

Компонент функции преобразования -> Компонент класса

Ответы 2

Другие вопросы по теме

Похожие вопросы