Функция React не возвращает элемент <div>

В следующем коде:

class App extends React.Component {
    state = { val: '' };

    handleChangeEvent = (e) => {
        this.setState({ val: e.target.value });
    }

    OddEven(num) {
        const number = parseInt(num);
        let description;

        if (Number.isInteger(number)) {
            if (number % 2 == 0) {
                description = <strong>even</strong>;
            } else {
                description = <i>odd</i>;
            }

            alert(number);

            return (
                <h1>
                    Test
                </h1>
            );
        } else {
            return null;
        }
    }
    render() {
        return (
            <div>
                <input type='text' onChange = {this.handleChangeEvent} />
                <button onClick = {() =>this.OddEven(this.state.val) }>
                    Odd Even
                </button>
            </div>
        );
     }
}

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

OddEven() не возвращает div. Не могу понять почему последние 2 часа. Я нахожусь в стадии обучения. Так что не обижайтесь, если это глупо.

Что вы имеете в виду, говоря, что не возвращает div ??

— 01.06.2018 15:07

@scunliffe Вам не нужно определять его как функцию внутри класса реакции

— 01.06.2018 15:15

Вызывается ли ваш alert ()? например если вы не измените значение по умолчанию "" (пустая строка), ... эта строка вернет false: Number.isInteger("")

— 01.06.2018 15:16

Для того, что вы используете 'description', вы настраиваете его, но никогда не используете, также 'OddEven' возвращает элемент null или <h1>, в этой функции нет div.

— 01.06.2018 15:22

ООООП извините, ребята, моя ОШИБКА. Первоначально OddEven был написан как функция вне класса, например, function OddEven (), и функция должна вызываться из кнопки onclick () вместе с состоянием. "описание" должно быть возвращено. Очень жаль.

— 01.06.2018 17:47

reactjs

01.06.2018 14:57

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

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

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

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

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

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

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

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

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

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

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

333

Ответы 3

если вы хотите вернуть свое описание, вот как это сделать:

class App extends React.Component {
  state = { 
   val: '',
   description: null,
    };

handleChangeEvent = (e) => {
    this.setState({ val: e.target.value });
}

OddEven(num) {
    const number = parseInt(num);
    let {description} = this.state;
    if (Number.isInteger(number)) {
        if (number % 2 == 0) {
            description = <strong>even</strong>;
        } else {
            description = <i>odd</i>;
        }

        this.setState({description: description});
    } else {
        this.setState({description: null});
    }
}
render() {
    return (
        <div>
            <input type='text' onChange = {this.handleChangeEvent} />
            <button onClick = {() =>this.OddEven(this.state.val) }>
            Odd Even Check?
            </button>
            {this.state.description}
        </div>
        );
}
}

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

— 01.06.2018 17:50

01.06.2018 15:20

Это потому, что вы нигде не визуализируете то, что возвращает ваша функция, вы бы предпочли сделать следующее:

class App extends React.Component {
  state = { val: "", oddeven: "" }

  handleChangeEvent = e => {
    this.setState({ val: e.target.value })
  }

  OddEven = () => {
    const number = parseInt(this.state.val) //Use the state directly
    let description
    if (Number.isInteger(number)) {
      if (number % 2 == 0) {
        description = <strong>even</strong>
      } else {
        description = <i>odd</i>
      }
      alert(number)
      this.setState({ oddEven: "Hello" })
    } else {
      return null
    }
  }

  render() {
    return (
      <div>
        <input type = "text" onChange = {this.handleChangeEvent} />
        <button onClick = {this.OddEven}>Odd Even</button> {/* you do not need to passs the state here, you can directly access it in your function */}
        {this.state.oddEven && <h1>{this.state.oddEven}</h1>}  {/* Here we check if oddEven exists and then we display whatever we set in the OddEven function}
      </div>
    )
  }
}

Здесь мы устанавливаем состояние, которое вы хотите визуализировать, а затем используем его внутри нашей функции визуализации.

— 01.06.2018 17:49

01.06.2018 15:21

Попробуй это :

class App extends React.Component {
state = { val: '' };

handleChangeEvent = (e) => {
    this.setState({ val: e.target.value });
}

OddEven(num) {
    const number = parseInt(num);
    if (Number.isInteger(number)) {
        if (number % 2 == 0) {
            return <strong>even</strong>;
        } else {
            return <i>odd</i>;
        }

    } else {
        return <a>Please Enter A Number</a>;
    }
}
render() {
    return (
        <div>
            <input type='text' onChange = {this.handleChangeEvent} />
            {OddEven(this.state.val)}
        </div>
        );
}

— 01.06.2018 17:49

01.06.2018 15:24