无法在 TextArea 上读取 null 的属性“getAttribute”

Question

我现在只是在学习一些 react 的东西，在尝试实现 https://www.npmjs.com/package/textarea-markdown this 时遇到了错误。

我认为错误来自脚本试图在加载 textarea 之前更改 textarea，但我不知道如何修复它。

非常感谢任何帮助

代码如下

text.js

import React, { Component } from 'react';
import './texts.css';
import TextareaMarkdown from 'textarea-markdown'

let textarea = document.querySelector("textarea");
new TextareaMarkdown(textarea);


function Texts() {
    
  return (
    <div >
        <h2>Editor</h2>
            <textarea id="editor" data-preview="#preview"></textarea>
        <h2>Preview</h2>
    <div id="preview"></div>
    </div>
  );
  
}



export default Texts;

App.js

import logo from './logo.svg';
import './App.css';
import Texts from './components/texts/texts';



function App() {
  
  return (
    
    <div className="App">
      <header className="App-header">
        <Texts></Texts>
      </header>
    </div>
  );

}

export default App;

我收到的错误是这样的

TypeError: Cannot read property 'getAttribute' of null
TextareaMarkdown.setPreview
node_modules/textarea-markdown/lib/textarea-markdown.js:65
  62 | value: function setPreview() {
  63 |   var _this2 = this;
  64 | 
> 65 |   var selector = this.textarea.getAttribute('data-preview');
     | ^  66 |   if (selector) {
  67 |     Array.from(document.querySelectorAll(selector), function (e) {
  68 |       return _this2.previews.push(e);
View compiled

Answer 1

您可以在useEffect 中使用以下代码 如下所示

import React, { Component, useEffect } from 'react';
import './texts.css';
import TextareaMarkdown from 'textarea-markdown'


function Texts() {

useEffect(()=>{
 let textarea = document.querySelector("textarea");
 new TextareaMarkdown(textarea);
},[]);


  return (
    <div >
        <h2>Editor</h2>
            <textarea id="editor" data-preview="#preview"></textarea>
        <h2>Preview</h2>
    <div id="preview"></div>
    </div>
  );
  
}



export default Texts;