Question

首先，我要动态标题标签。每个页面的<h2> Something</h2>更改标题标签因此，我尝试使<h2 id="name">something</h2>的标题标签页成为单个html页。并且每个不同的javascript页面都有自己的<h2> 我尝试使用var something =document.getElementById("name")，然后使用document.title=something，就像这样。但是该主文件无法获取外部文件中的元素。

反正我可以制作动态标题标签吗？

没有jquery。

Answer 1

使用ReactJS

您可以仅为标题创建一个组件。让该组件接受一个名为“ title”的道具，然后显示该标题。

标题组件：您的标题组件可以是功能组件

import React from 'react'; 

export default (props) => {
  return (
    <div className="your class names for this title">
      <h2>{this.props.title}</h2>
    </div>
  )
}

这是完美的功能组件语法。只需将文件另存为“ Title.js”。您可以像这样将其导入父组件中：

import Title from "./path/of/Title/Title";

那将正常工作。如果您对该语法不满意，可以这样重写它：

const Title = (props) => (
     <div className="your class names for this title">
       <h2>{this.props.title}</h2>
     </div>
);

这也是完全有效的。接下来，让我们讨论父组件。您的父组件就是您的页面。因此，仅在此示例中，我们将此组件称为“主页”。

家庭组件：一个类组件（假设它具有状态，但不必是类组件）

import React, { Component } from 'react';
//import Title component 
import Title from "./path/of/Title/Title"; //note: your component should be in a directory that has the same name as the component 

export default class Home extends Component {
  render() {
    return (
      <div>
        <Title title="insert title here" /> 
        <div>
          Rest of your home component
        </div>
      </div>
    )
  }
}

就是这样。您有一个动态标题。现在，假设您要将变量传递给属性“ title”，而不是始终对字符串进行硬编码。好了，您可以更新此行：

<Title title="insert title here" />

对此：

<Title title={nameOfVariable} />

如果该变量来自您的状态，则可以执行以下操作：

<Title title={this.state.nameofvariable} />

您始终可以破坏状态并改为执行此操作：

render(){
  const { nameofvariable } = this.state; 
  return (
     <div>
        <Title title={nameofvariable} /> 
        <div>
          Rest of your home component
        </div>
      </div>
  );

}

这就是您所需要的。希望能有所帮助。祝好运。

如何从另一个JavaScript获取元素

1 个答案:

使用ReactJS