个人中心
gpt4 book ai didi

javascript - 如何在 Reactjs 中将 JavaScript 与 $ inside render() 一起使用

转载 作者：行者123 更新时间：2023-11-30 19:22:30 25 4
gpt4 key购买 nike

我在 React 管理界面中从事内容编辑工作。我很想安装我最喜欢的 block 内容编辑器。但它是旧的，没有反应版本。

我知道如何在头部链接 .js 和 .css ReactHelmet

但不知道如何运行以下脚本:

<script>
    $(function () {
      $("#editor").brickyeditor({
        ignoreHtml: true,
        blocksUrl: 'data.json',
        templatesUrl: 'templates.html',
        onChange: function(data) {
          console.log(data.html);
        }
      });
    });
 </script>

这是初始的html结构


<body>
  <header>
    <nav class="container navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="index.html">BrickyEditor</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <main>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div id="editor"></div>
        </div>
      </div>
    </div>
    </div>
  </main>
</body>

我是这样使用它的:

import PageTitle from "../components/common/PageTitle";
import Helmet from "react-helmet";
import $ from 'jquery'; 

class NewsEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

      };
  }

  render() {
    const {

    } = this.state;

    return (
        <Container fluid className="main-content-container px-4">
            {/* Page Header */}
            <Row noGutters className="page-header py-4">
                <PageTitle sm="4" title="News editor" subtitle="Drag and drop interface" className="text-sm-left" />
            </Row>
            <Helmet 
                title="Nested Title"
                link={[
                        {"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.css"}                        
                    ]}
                script={[
                  {"src": "https://cdn.jsdelivr.net/npm/brickyeditor/dist/jquery.brickyeditor.min.js"}, 
                ]}

                />  
            <header>

            <script>
                $(function () {
                $("#editor").brickyeditor({
                    ignoreHtml: true,
                    blocksUrl: 'data.json',
                    templatesUrl: 'templates.html',
                    onChange: function(data) {
                    console.log(data.html);
                    }
                });
                });
            </script>

                <nav class="container navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="index.html">BrickyEditor</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="http://brickyeditor.info/examples.html">More Examples</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/yakovlevga/brickyeditor">GitHub Repository</a>
                    </li>
                    </ul>
                </div>
                </nav>
            </header>
            <main>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="editor"></div>
                        </div>
                    </div>
                </div>
            </main>



        </Container>
    );
  }
}




export default NewsEditor;

在这个阶段，我遇到的只是编译失败错误。

UPD:按照建议我不断收到 TypeErrors

最佳答案

我总是为外部库制作可重用的组件。所以在你的情况下，它将是 BrickyEditor 组件，它看起来像这样:

class BrickyEditor extends React.Component {
  editorRef = React.createRef();

  componentDidMount() {
    window.$(this.editorRef.current).brickyeditor(this.props);
  }

  render() {
    return <div ref={this.editorRef}></div>
  }
}

// in your NewsEditor component you can use it like so
<BrickyEditor
  ignoreHtml={true}
  blocksUrl="data.json"
  templatesUrl="templates.html"
  onChange={function(data) {
    console.log(data.html);
  }}
/>

关于javascript - 如何在 Reactjs 中将 JavaScript 与 $ inside render() 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57310158/

25 4 0
文章推荐： JavaScript:在单击时生成范围内的随机数并在每次下一次单击时添加随机数
文章推荐： C - 将多个指针作为参数传递给 pthread_create
文章推荐： c - 为什么我收到此格式错误 ‘%c’ 需要类型 ‘int’
文章推荐： javascript - react : Are props objects passed automatically to children components or does there always exist some default props?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com