Javascript 反应头盔：不'；t添加和更新html属性_Javascript_Reactjs_React Helmet

Javascript 反应头盔：不'；t添加和更新html属性

javascript reactjs

Javascript 反应头盔：不'；t添加和更新html属性,javascript,reactjs,react-helmet,Javascript,Reactjs,React Helmet,使用ReactJsHelmet 6.0组件时出现问题。该应用程序具有语言切换选项和一些其他页面。一旦页面或语言发生更改，新的元数据将呈现。说明、关键字和标题已更新，但htmlAttributes中的所有标记均未发生任何变化因此，schema或html lang标记不会添加到DOM中 index.html非常简单： <!doctype html> <html lang="en"> <!-- nothing is happening if I

使用

ReactJs

Helmet 6.0

组件时出现问题。
该应用程序具有语言切换选项和一些其他页面。
一旦页面或语言发生更改，新的

元数据将呈现。

说明
、关键字
和标题
已更新，但htmlAttributes中的所有标记均未发生任何变化

因此，schema
或html lang
标记不会添加到DOM中
index.html非常简单：
<!doctype html>
<html lang="en"> <!-- nothing is happening if I remove it -->
<head>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="author">
    <link rel="icon" href="/img/favicon.png">
        
</head>
  <body>   
    <div id="app"></div>
  </body>
</html>



index.js
class App extends React.Component {
  
  componentWillMount() {       
    var metaTitle=[];
    var desc=[];
    var kewd=[];

    if (i18n.language=='en') {   
      this.metaTitle = "En title";      
      this.desc = 'En desc';    
      this.kewd = 'En keywords';
    } else {
      this.metaTitle = "other lang title";      
      this.desc = 'other lang desc';    
      this.kewd = 'other lang keywords';
    }    
    
  }    

  render() {       

    var lang = i18n.language;    

    return (      
      <I18nextProvider i18n={i18n}>
        <div>               
          <SEO
            schema="Product"
            title={this.metaTitle}
            lang={i18n.language}
            keywords={this.kewd}
            description={this.desc}            
            base="base.com"
            path={`/${lang}`}
            contentType="product"
          />   
          <Router history={customHistory}>
            <Switch>
              <Route paths .../>
            </Switch>
          </Router>
        </div>
      </I18nextProvider>
    )
  }
}


ReactDOM.render(<App />, document.getElementById('app'));

import { Helmet } from 'react-helmet';

  class SEO extends React.Component {

    render() {      
      
      const { schema, lang, title, description, keywords, base, path, contentType } = this.props;
      const meta = [
                    {name: 'author', content: 'author'.toString() },
                    {name: 'description', content: description.toString()},
                    {name: 'keywords', content: keywords.toString()},
                    {property: 'og:title', content: `${title}`.toString()},
                    {property: 'og:description', content: description},
      ];
      
      return (
              <Helmet
                  htmlAttributes={{
                    lang: i18n.language,
                    itemscope: undefined,
                    itemtype: `http://schema.org/${schema}`,                
                  }.toString()}
                  title={title}
                  meta={meta}
                  />
                  )
                }
              }
export default SEO;

类应用程序扩展了React.Component{
componentWillMount（）{
var metaTitle=[]；
var desc=[]；
var kewd=[]；
if（i18n.language=='en'）{
this.metaTitle=“En title”；
this.desc='En desc'；
this.kewd='En keywords'；
}否则{
this.metaTitle=“其他语言标题”；
this.desc='other lang desc'；
this.kewd='其他lang关键字'；
}    
}    
render（）{
var lang=i18n.语言；
报税表（
)
}
}
ReactDOM.render（，document.getElementById（'app'））；

SEO.js
class App extends React.Component {
  
  componentWillMount() {       
    var metaTitle=[];
    var desc=[];
    var kewd=[];

    if (i18n.language=='en') {   
      this.metaTitle = "En title";      
      this.desc = 'En desc';    
      this.kewd = 'En keywords';
    } else {
      this.metaTitle = "other lang title";      
      this.desc = 'other lang desc';    
      this.kewd = 'other lang keywords';
    }    
    
  }    

  render() {       

    var lang = i18n.language;    

    return (      
      <I18nextProvider i18n={i18n}>
        <div>               
          <SEO
            schema="Product"
            title={this.metaTitle}
            lang={i18n.language}
            keywords={this.kewd}
            description={this.desc}            
            base="base.com"
            path={`/${lang}`}
            contentType="product"
          />   
          <Router history={customHistory}>
            <Switch>
              <Route paths .../>
            </Switch>
          </Router>
        </div>
      </I18nextProvider>
    )
  }
}


ReactDOM.render(<App />, document.getElementById('app'));

import { Helmet } from 'react-helmet';

  class SEO extends React.Component {

    render() {      
      
      const { schema, lang, title, description, keywords, base, path, contentType } = this.props;
      const meta = [
                    {name: 'author', content: 'author'.toString() },
                    {name: 'description', content: description.toString()},
                    {name: 'keywords', content: keywords.toString()},
                    {property: 'og:title', content: `${title}`.toString()},
                    {property: 'og:description', content: description},
      ];
      
      return (
              <Helmet
                  htmlAttributes={{
                    lang: i18n.language,
                    itemscope: undefined,
                    itemtype: `http://schema.org/${schema}`,                
                  }.toString()}
                  title={title}
                  meta={meta}
                  />
                  )
                }
              }
export default SEO;

从'react Helmet'导入{Helmet}；
类SEO扩展了React.Component{
render（）{
const{schema，lang，title，description，keywords，base，path，contentType}=this.props；
常数元=[
{name:'author'，content:'author'.toString（）}，
{name:'description'，content:description.toString（）}，
{name:'keywords'，content:keywords.toString（）}，
{property:'og:title'，内容：`${title}`.toString（）}，
{property:'og:description'，content:description}，
];
返回(
)
}
}
导出默认搜索引擎优化；