nflの連中はReact jsの痛みの1つを解消し、頭で作業しました。 それは、 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 ( <div> <Helmet htmlAttributes={{"lang": "en", "amp": undefined}} // amp takes no value title="My Title" titleTemplate="MySite.com - %s" defaultTitle="My Default Title" base={{"target": "_blank", "href": "http://mysite.com/"}} meta={[ {"name": "description", "content": "Helmet application"}, {"property": "og:type", "content": "article"} ]} link={[ {"rel": "canonical", "href": "http://mysite.com/example"}, {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"}, {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"} ]} script={[ {"src": "http://include.com/pathtojs.js", "type": "text/javascript"}, {"type": "application/ld+json", innerHTML: `{ "@context": "http://schema.org" }`} ]} // </div> ); }
ヘルメットは、あらゆるレベルのネストのコンポーネントで使用できますが、レベルの下のコンポーネントに設定されたプロパティは、コンポーネントに設定されたプロパティを1レベル高く研削します。
class SomeComponent extends Component { render(){ return ( <div> <Helmet title="My Title" meta={[ {"name": "description", "content": "Helmet application"} ]} link={[ {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"}, {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"} ]} base={{"href": "http://mysite.com/"}} /> <AnotherComponent /> </div> ) } } class AnotherComponent extends Component { render(){ return ( <div> <Helmet title="Nested Title" meta={[ {"name": "description", "content": "Nested component"} ]} link={[ {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-180x180.png"} ]} base={{"href": "http://mysite.com/blog"}} /> </div> ) } }
その結果、以下が得られます。
<head> <title>Nested Title</title> <meta name="description" content="Nested component"> <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-180x180.png"> <base href="http://mysite.com/blog"> </head>
タイトルには、テンプレートを設定する機会があります：
<Helmet defaultTitle="My Site" titleTemplate="My Site - %s" /> <Helmet title="Nested Title" />
結果：
<head> <title>My Site - Nested Title</title> </head>
スクリプトタグの作成：
<Helmet script={[{ "type": "application/ld+json", "innerHTML": `{ "@context": "http://schema.org", "@type": "NewsArticle" }` }]} />
結果：
<head> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle" } </script> </head>
スタイルタグの作成：
<Helmet style={[{ "cssText": ` body { background-color: green; } ` }]} />
結果：
<head> <style> body { background-color: green; } </style> </head>
サーバーのヘッドのデータを取得するには、ReactDOM.renderToStringまたはReactDOM.renderToStaticMarkupの後にrewind（）メソッドを呼び出す必要があります。
返されるheadオブジェクトには、7つの可能なパラメーターがあります。
- htmlAttributes
- タイトル
- 拠点
- メタ
- リンク
- 台本
- スタイル
これらには、toComponent（）とtoString（）の2つのメソッドがあります。
データを文字列に変換する：
let markup = ReactDOM.renderToString(<Handler />); let head = Helmet.rewind(); const html = ` <!doctype html> <html ${head.htmlAttributes.toString()}> <head> ${head.title.toString()} ${head.meta.toString()} ${head.link.toString()} </head> <body> <div id="content"> ${markup} </div> </body> </html>` // ctx.body = html;
Reactスタイルのソリューション：
let markup = ReactDOM.renderToString(<Handler />); let head = Helmet.rewind(); function HTML () { const attrs = head.htmlAttributes.toComponent(); return ( <html {...attrs}> <head> {head.title.toComponent()} {head.meta.toComponent()} {head.link.toComponent()} </head> <body> <div id="content"> // React stuff here </div> </body> </html> ); } // ctx.body = ReactDOM.renderToString(<HTML />);
既製の使用例：
PSいつものように、私はあなたのコメントと追加を聞いてうれしいです。