Как получить элемент из другого JavaScript - PullRequest
Новая
       17

Как получить элемент из другого JavaScript

0 голосов
/ 11 декабря 2018

Во-первых, я бы хотел динамическую вкладку заголовка.Изменение вкладки заголовка на <h2> Something</h2> каждой отдельной страницы. Поэтому я попытался сделать <h2 id="name">something</h2> Я создал вкладку заголовка как одну HTML-страницу.и у каждой из разных страниц javascript есть свои <h2> Я пытался использовать var something =document.getElementById("name"), а затем document.title=something, как это.Но этот основной файл не может получить элементы, которые находятся во внешнем файле.

Можно ли вообще сделать вкладку динамического заголовка?

без jquery.

1 Ответ

0 голосов
/ 11 декабря 2018

Использование 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>
);

Это также совершенно верно.Далее давайте обсудим родительский компонент.Ваш родительский компонент - это ваша страница.Итак, давайте назовем этот компонент «Home» только для этого примера.

Домашний компонент : компонент класса (при условии, что он будет иметь состояние, но он не должен быть компонентом класса) 

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="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>
  );

}

Это все, что вам нужно.Надеюсь, это поможет.Удачи.

...