如何使常规javascript在react应用程序中工作

嗨，我正在尝试实现这个文本scrable 在我的react应用程序中，但我收到一个错误TypeError:无法读取null的属性“innerText”

   9 |   this.update = this.update.bind(this)
  10 | }
  11 | setText(newText) {
> 12 |   const oldText = this.el.innerText
  13 |   const length = Math.max(oldText.length, newText.length)
  14 |   const promise = new Promise(resolve => (this.resolve = resolve))
  15 |   this.queue = []

到目前为止，我就是这么做的

创建了新组件scrable.js

已从codepen中移动代码

导入到index.js

您不需要修复codesandbox，只要一点提示就足够了：）

import React，{Component}来自“React”
导出默认类Scrable扩展组件{
render（）{
常量短语=[
“Neo，”，
“迟早”，
“你会意识到”，
“和我一样”，
“这是有区别的”，
“在知道道路之间”，
“走在路上”，
]
const el=document.querySelector（“.text”）
const fx=新文本加扰（el）
控制台日志（el）
设计数器=0
常量下一个=（）=>{
fx.setText（短语[计数器]）然后（（）=>{
设置超时（下一步，800）
})
计数器=（计数器+1）%phrases.length
}
下一个（）
返回(
)
}
}
导出类TextScramble扩展组件{
建造师（el）{
超级（）
this.el=el
this.chars=“！-\\/[]{}-=+*^？#!!!!!”
this.update=this.update.bind（this）
}
setText（新文本）{
const oldText=this.el.innerText
const length=Math.max（oldText.length、newText.length）
const promise=新承诺（resolve=>（this.resolve=resolve））
this.queue=[]
for（设i=0；i=结束）{
完整的++
输出+=至
}else if（this.frame>=开始）{
if（！char | | Math.random（）<0.28）{
char=this.randomChar（）
this.queue[i].char=char
}
输出+=`${char}`
}否则{
输出+=来自
}
}
this.el.innerHTML=输出
if（complete==this.queue.length）{
这个。解决（）
}否则{
this.frameRequest=requestAnimationFrame（this.update）
这是我的相框++
}
}
randomChar（）{
返回this.chars[Math.floor（Math.random（）*this.chars.length）]
}
render（）{
返回
}
}

大家好，谢谢大家的评论

我能让它工作。下面是我的代码。欢迎提出任何建议

我不完全确定这是正确的方法，但它是有效的

import React, { Component } from 'react'

export default class Scrable extends Component {
  constructor(el) {
    super(el)
    this.el = el
    this.chars = "!<>-_\\/[]{}—=+*^?#________"
    // this.update = this.update.bind(this)
  }
  componentDidMount(){
    const phrases = [
      'Neo,',
      'sooner or later',
      'you\'re going to realize',
      'just as I did',
      'that there\'s a difference',
      'between knowing the path',
      'and walking the path'
    ]

    const el = document.querySelector('.text')
    const fx = new TextScramble(el)

    let counter = 0
    const next = () => {
      fx.setText(phrases[counter]).then(() => {
        setTimeout(next, 800)
      })
      counter = (counter + 1) % phrases.length
    }

    next()
    console.log(el)
  }
  render() {
    const phrases = [
      "Neo,",
      "sooner or later",
      "you're going to realize",
      "just as I did",
      "that there's a difference",
      "between knowing the path",
      "and walking the path",
    ]

    return (
      <div>
        <div className="text">text</div>
      </div>
    )
  }
}

class TextScramble {
  constructor(el) {
    this.el = el
    this.chars = '!<>-_\\/[]{}—=+*^?#________'
    this.update = this.update.bind(this)
    console.log(this)
  }
  setText(newText) {
    const oldText = this.el.innerText
    const length = Math.max(oldText.length, newText.length)
    const promise = new Promise((resolve) => this.resolve = resolve)
    this.queue = []
    for (let i = 0; i < length; i++) {
      const from = oldText[i] || ''
      const to = newText[i] || ''
      const start = Math.floor(Math.random() * 40)
      const end = start + Math.floor(Math.random() * 40)
      this.queue.push({ from, to, start, end })
    }
    cancelAnimationFrame(this.frameRequest)
    this.frame = 0
    this.update()
    return promise
  }
  update() {
    let output = ''
    let complete = 0
    for (let i = 0, n = this.queue.length; i < n; i++) {
      let { from, to, start, end, char } = this.queue[i]
      if (this.frame >= end) {
        complete++
        output += to
      } else if (this.frame >= start) {
        if (!char || Math.random() < 0.28) {
          char = this.randomChar()
          this.queue[i].char = char
        }
        output += `<span class="dud">${char}</span>`
      } else {
        output += from
      }
    }
    this.el.innerHTML = output
    if (complete === this.queue.length) {
      this.resolve()
    } else {
      this.frameRequest = requestAnimationFrame(this.update)
      this.frame++
    }
  }
  randomChar() {
    return this.chars[Math.floor(Math.random() * this.chars.length)]
  }
}

import React，{Component}来自“React”
导出默认类Scrable扩展组件{
建造师（el）{
超级（el）
this.el=el
this.chars=“！-\\/[]{}-=+*^？#!!!!!”
//this.update=this.update.bind（this）
}
componentDidMount（）{
常量短语=[
“尼奥，”，
"迟早",，
“你会意识到”，
“和我一样”，
“这是有区别的”，
“在知道道路之间”，
“走在小路上”
]
const el=document.querySelector（“.text”）
const fx=新文本加扰（el）
设计数器=0
常量下一个=（）=>{
fx.setText（短语[计数器]）然后（（）=>{
设置超时（下一步，800）
})
计数器=（计数器+1）%phrases.length
}
下一个（）
控制台日志（el）
}
render（）{
常量短语=[
“Neo，”，
“迟早”，
“你会意识到”，
“和我一样”，
“这是有区别的”，
“在知道道路之间”，
“走在路上”，
]
返回(
文本
)
}
}
类文本置乱{
建造师（el）{
this.el=el
this.chars='！-\\/[]{}-=+*^？#!!!!!
this.update=this.update.bind（this）
console.log（这个）
}
setText（新文本）{
const oldText=this.el.innerText
const length=Math.max（oldText.length、newText.length）
const promise=new promise（（resolve）=>this.resolve=resolve）
this.queue=[]
for（设i=0；i=结束）{
完整的++
输出+=至
}else if（this.frame>=开始）{
if（！char | | Math.random（）<0.28）{
char=this.randomChar（）
this.queue[i].char=char
}
输出+=`${char}`
}否则{
输出+=来自
}
}
this.el.innerHTML=输出
if（complete==this.queue.length）{
这个。解决（）
}否则{
this.frameRequest=requestAnimationFrame（this.update）
这是我的相框++
}
}
randomChar（）{
返回this.chars[Math.floor（Math.random（）*this.chars.length）]
}
}

为什么要在渲染函数中声明类？那没什么意义，班级是他们自己的事情。将其移出渲染，并将其置于与

类Scrable extends组件相同的级别。类是一个顶级构造。。我不知道，我能把它转换成正则函数吗？对！我要试试那个。谢谢我不想听起来很刻薄，但我建议从React及其概念的基础教程开始。你使用它的方式是各种各样的
import React, { Component } from 'react'

export default class Scrable extends Component {
  constructor(el) {
    super(el)
    this.el = el
    this.chars = "!<>-_\\/[]{}—=+*^?#________"
    // this.update = this.update.bind(this)
  }
  componentDidMount(){
    const phrases = [
      'Neo,',
      'sooner or later',
      'you\'re going to realize',
      'just as I did',
      'that there\'s a difference',
      'between knowing the path',
      'and walking the path'
    ]

    const el = document.querySelector('.text')
    const fx = new TextScramble(el)

    let counter = 0
    const next = () => {
      fx.setText(phrases[counter]).then(() => {
        setTimeout(next, 800)
      })
      counter = (counter + 1) % phrases.length
    }

    next()
    console.log(el)
  }
  render() {
    const phrases = [
      "Neo,",
      "sooner or later",
      "you're going to realize",
      "just as I did",
      "that there's a difference",
      "between knowing the path",
      "and walking the path",
    ]

    return (
      <div>
        <div className="text">text</div>
      </div>
    )
  }
}

class TextScramble {
  constructor(el) {
    this.el = el
    this.chars = '!<>-_\\/[]{}—=+*^?#________'
    this.update = this.update.bind(this)
    console.log(this)
  }
  setText(newText) {
    const oldText = this.el.innerText
    const length = Math.max(oldText.length, newText.length)
    const promise = new Promise((resolve) => this.resolve = resolve)
    this.queue = []
    for (let i = 0; i < length; i++) {
      const from = oldText[i] || ''
      const to = newText[i] || ''
      const start = Math.floor(Math.random() * 40)
      const end = start + Math.floor(Math.random() * 40)
      this.queue.push({ from, to, start, end })
    }
    cancelAnimationFrame(this.frameRequest)
    this.frame = 0
    this.update()
    return promise
  }
  update() {
    let output = ''
    let complete = 0
    for (let i = 0, n = this.queue.length; i < n; i++) {
      let { from, to, start, end, char } = this.queue[i]
      if (this.frame >= end) {
        complete++
        output += to
      } else if (this.frame >= start) {
        if (!char || Math.random() < 0.28) {
          char = this.randomChar()
          this.queue[i].char = char
        }
        output += `<span class="dud">${char}</span>`
      } else {
        output += from
      }
    }
    this.el.innerHTML = output
    if (complete === this.queue.length) {
      this.resolve()
    } else {
      this.frameRequest = requestAnimationFrame(this.update)
      this.frame++
    }
  }
  randomChar() {
    return this.chars[Math.floor(Math.random() * this.chars.length)]
  }
}