Table of Content

Практика описана в даній статті відноситься до Bad Practice, вона надається як зразок для менш болісного перехідного періоду і в майбутньому обов’язково має бути оптимізована під вимоги React.

На початку впровадження нових технологій на проект, не можна все старе викинути і написати код заново, точніше можна, але бізнес це не оцінить.

Припустимо компанія довгий час проводила розробку на PHP, має багато наробіток на GitHub, має сильні знання в стеку технологій які працюють з PHP, але приходить час коли того всього стає мало і потрібно підвищувати рівень. Поява React стала для нас тим каталізатором, коли ми зрозуміли, що чекати немає чого, потрібно діяти.

Саме перше питання, яке виникає при впровадженні React в існуючий проект, як зробити так, щоб і вівці цілі, і вовки ситі?
Перше, що приходить в голову, це отримувати готовий HTML з сервера і запихати його в React, при цьому забороняти компоненту перемальовуватись.
Коли запитуєш в google “react partial server side rendering“, все що він повертає не відповідає бажаному. Всі статті кажуть як нам отримати повну HTML сторінку для конктернього URL, так це теж можна віднести до partial, але нас цікавить промальовування окремих компонентів на сторінці, а не всієї сторінки.

Те що нам допоможе у вирішені поточної проблеми називається React dangerouslySetInnerHTML – це покращенна версія innerHtml, і так, слово “dangerously” натякає, що цим методом потрібно користуватись обережно. Але нам потрібно рухатись вперед, і по мірі нарощування skills покращувати код.

Створюємо новий React Component який буде присвоювати в компонент умовно отриманий HTML код з сервера

import React, { Component } from 'react';

class Marketplace extends Component {

  state = {
    description: '<p><strong>Our Opportunity:</strong></p>'
  };

  componentDidMount() {
    // here we can get HTML from the server
  }

  shouldComponentUpdate(props) {
    return false;
  }

  htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div className="animated fadeIn">
        Here is my Marketplace Component
        <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
      </div>
    );
  }
}

export default Marketplace;

Зверніть увагу на return false; в shouldComponentUpdate. Це вказує React, що йому не варто оновлювати DOM, ми це зробимо вручну.

Якщо ми маємо справу з HTMLEntitles, тоді неохідно декодувати їх перед передачею до dangerouslySetInnerHTML, ось чому вона називається dangerously 🙂

Як отримувати HTML з сервера, про це поговоримо в наступній статті з цієї серії, але це не важливо, ви можете використати метод який є найбільш прийнятним для вас в даний момент.

Корисні посилання
Render HTML string as real HTML in a React component

Last modified: 13.11.2018

Author

Comments

Write a Reply or Comment

Your email address will not be published.