Korzystanie z console.log w JSX

Jako instruktor programowania widziałem wielu studentów próbujących zrobić coś takiego:

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

Nie spowoduje to wydrukowania oczekiwanej listy w konsoli. Zamiast tego wyrenderuje to ciąg console.log (this.props.todos) w przeglądarce.

Spójrzmy najpierw na kilka prostych rozwiązań, a potem wytłumaczę powód, dla którego działają.

Najczęstsze rozwiązanie:

Osadzenie wyrażenia w JSX:

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

Inne popularne rozwiązanie:

Umieszczenie console.log przed return():

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

Wymyślne rozwiązanie:

Bądź „fancy” i napisz swój własny komponent <ConsoleLog>:

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

A potem go użyj: 

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

Dlaczego tak jest?

Pamiętajmy, że JSX to nie vanilla JS. Nie jest to też HTML. JSX to rozszerzenie składni. Finalnie jednak JSX zostaje skompilowane do czystego JavaScriptu. Na przykład, jeśli napiszemy następujący JSX: 

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

To zostanie on skompilowany do:

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

Zbadajmy parametry React.createElement:

• „h1” to nazwa tagu w postaci łańcucha znaków. 
• {className: „greeting”}to właściwości używane w <h1>. Zostanie to przekonwertowane do obiektu. Kluczem obiektu jest nazwa właściwości, a wartością jest oczywiście wartość właściwości.
• 'Hello World!'określa się mianem „dzieci”. Znajduje się tam wszystko, co jest przekazywane między tagiem otwierającym <h1> a tagiem zamykającym </h1>.

Przyjrzyjmy się teraz przypadkowi z początku artykułu, w którym nie udało nam się wypisać wiadomości przez console.log.

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

Zostałoby to skompilowane do:

// 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)'
  ]
);

Zobacz, jak console.log jest przekazywany jako ciąg znaków do create.Element. Dlatego nie zostaje to wykonane. Ma to sens, ponieważ powyżej mamy tytuł List of todos. Skąd zatem komputer może wiedzieć, który tekst należy wykonać, a który wyrenderować?

Odpowiedź: komputer traktuje oba teksty jako ciągi. Tekst jest zawsze traktowany przez komputer jako ciąg. Dlatego, jeżeli chcesz wykonać coś w JSX, to musisz mu to sprecyzować, poprzez osadzenie wyrażenia w {}.

I proszę bardzo! Teraz wiesz, gdzie, kiedy i jak można korzystać z console.log w JSX!

Oryginał tekstu w języku angielskim przeczytasz tutaj.