Можете ли вы console.log в JSX?

TL; DR: вставьте выражение

Как инструктор по программированию, я видел, как многие студенты пробовали это:

render() {
  return (
    <div>
      <h1>List of todos</h1>
      console.log(this.props.todos)
    </div>
  );
}

Это не напечатает ожидаемый список в консоли. Он просто отобразит строку console.log (this.props.todos) в браузере.

Давайте сначала рассмотрим некоторые очень простые решения, а затем объясним причину.

Наиболее часто используемое решение:

Вставьте выражение в свой JSX:

render() {
  return (
    <div>
      <h1>List of todos</h1>
      { console.log(this.props.todos) }
    </div>
  );
}

Еще одно популярное решение:

Поместите ваш console.log перед return():

render() {
  console.log(this.props.todos);
  return (
    <div>
      <h1>List of todos</h1>
    </div>
  );
}

Замечательное решение:

Создайте фантазию, написав и используя свой own<ConsoleLog> Component:

const ConsoleLog = ({ children }) => {
  console.log(children);
  return false;
};

Тогда используйте это:

render() {
  return (
    <div>
      <h1>List of todos</h1>
      <ConsoleLog>{ this.props.todos }</ConsoleLog>
    </div>
  );
}

Почему это так?

Мы должны помнить, что JSX - это не ванильный JavaScript и не HTML. Это расширение синтаксиса.

В конечном итоге JSX компилируется в обычный JavaScript.

Например, если мы напишем следующий JSX:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Он будет скомпилирован в:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Давайте рассмотрим параметры React.createElement:

• 'h1': это имя тега в виде строки
• { className: 'greeting' }: Это реквизиты, используемые в <h1>. Он преобразуется в объект. Ключ объекта - это имя свойства, а значение - его значение.
• 'Hello, world!': Это называется children. Это то, что передается между открывающим тегом <h1> и закрывающим тегом </h1>.

Давайте теперь рассмотрим неудачный console.log, который мы пытались написать в начале этой статьи:

<div>
  <h1>List of todos</h1>
  console.log(this.props.todos)
</div>

Это будет скомпилировано в:

// when more than 1 thing is passed in, it is converted to an array
React.createElement(
  'div',
  {}, // no props are passed/
  [ 
    React.createElement(
      'h1',
      {}, // no props here either
      'List of todos',
    ),
    'console.log(this.props.todos)'
  ]
);

Посмотрите, как console.log передается в виде строки в createElement. Не выполняется.

Это имеет смысл, выше у нас есть заголовок List of todos. Как компьютер мог узнать, какой текст нужно выполнить, а какой вы хотите визуализировать?

Ответ: оба варианта рассматриваются как строка. Он ВСЕГДА рассматривает текст как строку.

Следовательно, если вы хотите, чтобы это было выполнено, вам необходимо указать JSX для этого. Вставив его как выражение с {}.

И вот так! Теперь вы знаете, где, когда и как console.log можно использовать внутри JSX!

Если вам понравилась эта статья, подумайте о подписке на мой информационный бюллетень на GIMTEC.