Универсальний (изоморфный) «шлем» для React js или Как удобно работать с head на React js07.10.2016 12:18

Ребята из nfl вылечили одну из болей React js, работу с head. Речь пойдет о библиотеке react-helmet. Она работает как на клиенте, так и на сервере.

В предыдущей статье я писал о бойлер-плейте, в котором уже использутся react-helmet, поэтому возьму его:

       git clone https://github.com/BoryaMogila/koa_react_redux.git;
       npm install;
       npm run-script run-with-build;

Для тех, у кого своя сборка, ставим модуль:

      npm install --save react-helmet

Подключаем в своем в компоненте:

import { Component } from 'react'
import Helmet from "react-helmet"

class SomeComponent extends Component {
    render(){
        return (
            

                
        );
    }

Helmet можно использовать в компонентах любой степени вложености, при этом свойства, заданные в компоненте ниже уровнем, будут перетирать свойства, заданные в компоненте уровнем выше.

class SomeComponent extends Component {
        render(){
               return (
                      

                          
                          
                      
               )
        }
}

class AnotherComponent extends Component {
        render(){
               return (
                      

                          
                      
               )
        }
}

В итоге получим:

Для тайтла есть возможность задать шаблон:

Результат:

Создание тега script:

Результат:

Создание тега style:

Результат:

Для получения данных для head на сервере нужно вызвать метод rewind () после ReactDOM.renderToString или ReactDOM.renderToStaticMarkup.

Возвращенный объект head имеет семь возможных параметров:

• htmlAttributes
• title
• base
• meta
• link
• script
• style

Они имеют два метода toComponent () и toString ().

Преобразование данных в строку:

let markup = ReactDOM.renderToString();
let head = Helmet.rewind();

const html = `
    
    
        
            ${head.title.toString()}
            ${head.meta.toString()}
            ${head.link.toString()}
        
        
            

                 ${markup}
            
        











    `
//ответ сервера
ctx.body = html;

Решение в стиле React:

let markup = ReactDOM.renderToString();
let head = Helmet.rewind();
function HTML () {
    const attrs = head.htmlAttributes.toComponent();

    return (
        
            
                {head.title.toComponent()}
                {head.meta.toComponent()}
                {head.link.toComponent()}
            
            
                

                    // React stuff here
                
            
        
    );
}
//ответ сервера
ctx.body = ReactDOM.renderToString();

Готовые рабочие примеры для использования:

• На сервере
  
• В компоненте
  

P.S. Как всегда рад услышать ваши замечания и дополнения.

Комментарии (0)