Сохраните DOM в переменной в ReactJS

Я пытаюсь сохранить DOM в переменной (let) и отобразить ее позже. Но он выдает мне неожиданный токен и отмечает мое имя переменной, и я немного сбит с толку, почему: D ... возможно, просто небольшая ошибка ... что угодно ... вот код "let whichCustomer" - это рассматриваемая переменная - очевидно.

class RegisterForm extends React.Component {
constructor(props) {
super(props);

this.state = {
  whatCustomer: 'searching'
};

// Welche Art von Kunde
this.handleKind = this.handleKind.bind(this);
}

// State setzen von "Art von Kunde"
handleKind(event) {
   this.setState({whatCustomer: event.target.value});

}

let whichCustomer = (<button className = "valueButton" name = "whatCustomer" value = "searching"  onClick = {this.handleKind}>Suchender</button>
<button className = "valueButton" name = "whatCustomer" value = "sponsor" onClick = {this.handleKind}>Sponsor</button>
<button className = "valueButton" name = "whatCustomer" value = "adverter" onClick = {this.handleKind}>Werbeflächenbetreiber</button>
);

render() {
  return (
    <div className = "registerForm" id = "sponsor">
      <h1 className = "turquoise" style = {{textAlign: 'center'}}>
        Jetzt direkt registrieren und loslegen!
      </h1>
      <br />
      <br />
      <form>
        Was sind Sie?
        <br />
        {whichCustomer}
      </form>
    </div>
  );
}
}

Я немного новичок, чтобы отреагировать .. помилуй меня, пожалуйста: D

Добавьте код всего вашего компонента, чтобы мы могли видеть, является ли он тупым компонентом, функцией или компонентом стиля класса. Обычно вы можете называть свою переменную как {this.whichCustomer}

— 07.04.2018 07:31

reactjs

07.04.2018 07:24

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

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

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

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

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

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

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

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

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

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

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

566

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

Ответы 2

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

В коде я предполагаю, что вы написали let whichCustomer внутри компонента класса (вот почему вы получаете неожиданный токен). Внутри компонента класса вы не можете объявить переменную. Вы должны записать whichCustomer без ключевого слова let.

Properties specified in a class definition are assigned the same attributes as if they appeared in an object literal.

whichCustomer = (<button className = "valueButton" name = "whatCustomer" value = "searching"  onClick = {this.handleKind}>Suchender</button>
<button className = "valueButton" name = "whatCustomer" value = "sponsor" onClick = {this.handleKind}>Sponsor</button>
<button className = "valueButton" name = "whatCustomer" value = "adverter" onClick = {this.handleKind}>Werbeflächenbetreiber</button>
);

также добавьте ключевое слово this для доступа к свойству.

whichCustomer = (<button className = "valueButton" name = "whatCustomer" value = "searching"  onClick = {this.handleKind}>Suchender</button>
<button className = "valueButton" name = "whatCustomer" value = "sponsor" onClick = {this.handleKind}>Sponsor</button>
<button className = "valueButton" name = "whatCustomer" value = "adverter" onClick = {this.handleKind}>Werbeflächenbetreiber</button>
);

render() {
  return (
    <div className = "registerForm" id = "sponsor">
      <h1 className = "turquoise" style = {{textAlign: 'center'}}>
        Jetzt direkt registrieren und loslegen!
      </h1>
      <br />
      <br />
      <form>
        Was sind Sie?
        <br />
        {this.whichCustomer}
      </form>
    </div>
  );

Это была проблема! Спасибо: D Но все еще интересно .. почему нет объявления внутри компонента класса?

— 07.04.2018 16:36

07.04.2018 07:51

Лучше сделать stateless component.

WhatCustomer

const WhichCustomer = ({handleKind}) => (
  <React.Fragment>
    <button
      className = "valueButton"
      name = "whatCustomer"
      value = "searching"
      onClick = {handleKind}>Suchender</button>
    <button
      className = "valueButton"
      name = "whatCustomer"
      value = "sponsor"
      onClick = {handleKind}>
      Sponsor
    </button>
    <button
      className = "valueButton"
      name = "whatCustomer"
      value = "adverter"
      onClick = {handleKind}>Werbeflächenbetreiber</button>
  </React.Fragment>
);

оказывать:

render() {
  return (
    <div className = "registerForm" id = "sponsor">

      <WhichCustomer handleKind = {this.handleKind}/>
    </div>
  );
}

07.04.2018 08:33

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

React 16.3. * Context Provider Err: ожидаемая строка или класс / функция, но получено: объект

ОШИБКА: this.props.addNew не является функцией

Можете ли вы использовать this.setState в объекте-конструкторе внутри компонента реакции?

Шаблон для реагирующих компонентов, которым требуются определенные содержащиеся компоненты

Архитектура React и Redux

Отображение типов свойств компонентов React

Двусторонняя связь клиент-сервер

Компонент реакции this.value имеет значение null, даже если он заполнен

Цвета продолжают рандомизироваться в sectionList

Как установить высоту полосы прокрутки в операторе return responsejs?

Сохраните DOM в переменной в ReactJS

Ответы 2

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

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