JS не работает на Гэтсби

Question

Я впервые пытаюсь построить блог в Гэтсби.Я использую Gatsby Starter Blog в качестве основы.

Я хочу добавить javascript для анимации текста, и в качестве быстрого теста я добавил ниже к своему html.js file:

<script
      dangerouslySetInnerHTML={{
        __html: `
                var name = 'world';
                console.log('Hello ' + name);

                console.log('hey');

                const phrases = [
                    'aaa',
                    'bbb',
                    'ccc'
                ];

                const el = document.getElementById('bio__subtext');

                el.innerHTML = 'hi';

            `,
      }}
    />

Однако в моей консоли выдается следующая ошибка: (index):15 Uncaught TypeError: Cannot read property 'innerHTML' of null

Идентификатор правильный и существует в моем файле Bio.js:

class Bio extends React.Component {
  render() {
    return (
      <div id="bio">
        <div className="bio_wrapper">
            <img
              src={profilePic}
              alt={'NdW'}
            />
            <p>
              Hi, I'm Natalie!<br />
              I <span id="bio__subtext"></span><br/>
              <span className="about_button"><a href="/">Find out more</a></span>
              <a href="#" target="_blank">GH</a>
              <a href="#" target="_blank">TW</a>
            </p>
        </div>
      </div>
    )
  }
}

Я предполагаю, что это потому, что JS пытается запустить до завершения Bio.js ... но как мне сказать JS "ждать"?Если я попытаюсь включить JS в файл Bio.js, он не скомпилируется.

Добавление document.addEventListener("DOMContentLoaded", function(event) { также не поможет.

Answer 1

Не должно быть необходимости выбирать что-либо в DOM, как вы пытаетесь использовать document.getElementById('bio__subtext').

Вы можете объявить переменные прямо в вашем компоненте, где они необходимы, или передать затем вкомпонент через prop из более высокого контекста (страницы или другого компонента).

class Bio extends React.Component {
  render () {
    const name = 'Natalie'
    const phrases = [
      'Cowabunga',
      'Its Ninja Time',
      'Booyakasha'
    ]
    return (
      <div id="bio">
        Hi, I'm {name}!<br />
        Some of my favourite phrases are:
        <ul>
          {phrases.map(phrase => <li>{phrase}</li>)}
        </ul>
      </div>
    )
  }
}