2017-12-27 13 views
0

エラーが反応するJSに反応:小道具は、私がアクセスできる私は、いくつかのメタタグプロパティをレンダリングしたいのindex.html page.theメインページで小道具を反応させる方法はindex.htmlには小道具

を見つけていない反応。メタタグはバックエンドから来ています。

index.htmlで私の店舗データを取得したいのですが、page.index.htmlはコンポーネントではありません。どうすればいいのですか?

+2

コードを入力してください。 –

+1

あなたが何も提供していないときにあなたのコードに何が問題なのかを伝えるのは難しいです! [MCVEの作成方法](https://stackoverflow.com/help/mcve)を参照してください。 – David

答えて

0

最初にコードを入力しなかったので手伝いが難しいです。これからも何が助けてくれるのか。

npm i react-meta-tag --saveを実行して、最初にreact-meta-tagsをインストールします。下記に示すように、コンポーネントを作成します。

import React, {Component} from 'react' 
import ReactDOM from 'react-dom' 
import Metas from './Metas' 

class UseMeta extends Component { 
    render(){ 
     return(
      <Metas 
       title="Awesome website" 
       description="Awesome description about my website" 
       og-title="Another description" 
       og-image="./public/img/awesome-image.png" 
      /> 
     ) 
    } 
} 

ReactDOM.render(のdocument.getElementById(「ルート」:react-meta-tags

import React from 'react'; 
import MetaTags from 'react-meta-tags'; 

class Metas extends Component { 
    render(){ 
     return (
      <div> 
       <MetaTags> 
        <title>{props.title}</title> 
        <meta name="description" content={props.description} /> 
        <meta property="og:title" content={props.og-title} /> 
        <meta property="og:image" content={props.og-image} /> 
       </MetaTags> 
      </div> 
    ) 
    } 
} 

その後、あなたは、このような別のコンポーネントでこのコンポーネントを使用することができますから取られたコードを)) UseMetaが自動的に限り、あなたはこの

<!doctype html> 
<html lang="en"> 
    <head> 
    </head> 
    <body> 
    <div id="root"></div> 
    <script src="./UseMeta.js"></script> 
    </body> 
</html> 
のようなあなたのhtmlで id="root"を持っているとして、あなたのHTMLに追加されます0

バーベルを使用する必要があるかもしれません。完全なチュートリアルを見るには、Setup React.js with Npm, Babel 6 and Webpack in under 1 hour