使用React而不使用JSX突出显示语法-Java 学习之路

我想构建一个带有文本字段的React表单，该表单具有非常简单的语法高亮，但我想在没有JSX的情况下完成它 . 有没有办法在没有JSX的情况下使用DraftJS？

4 回答

0

当然有 . 使用draft-js会使它变得更简单，但是我怀疑你是否需要使用如此繁重的编辑器来完成这个简单的工作 . 看看https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#content

回复于 2024-05-16T23:23:09+08:00
0
您可以在浏览器中运行Babel和ES6垫片 . 在此方法中，您包括在浏览器中实现JSX和ES6的支持脚本 . Draft.js项目包含一些使用此技术的examples . 以下是包含的支持脚本：
```
<script src="../../node_modules/react/dist/react.min.js"></script>
<script src="../../node_modules/react-dom/dist/react-dom.js"></script>
<script src="../../node_modules/immutable/dist/immutable.js"></script>
<script src="../../node_modules/es6-shim/es6-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script src="../../dist/Draft.js"></script>
```
这种方法的缺点是用户的浏览器必须下载大量源代码，然后在实际运行代码之前运行Babylon转换器 .

好处是它易于配置 . 您可以自己托管支持脚本，也可以链接到cdnjs.com等CDN版本 . 部署新版本的代码只是意味着编辑主脚本并部署更改后的版本 .
回复于 2024-05-16T23:23:09+08:00

你可以使用 div 和 contenteditable="true" 在没有Draft.js的情况下完成 . 到目前为止，'s what I'已经完成了 . 对于此示例，突出显示规则是元音应以绿色突出显示 .

它工作得相当好，但我仍然需要添加代码以保持选择在正确的位置 .

有没有办法使用DraftJS？有更简单的方法吗？

var SpanEditor = React.createClass({
    handleChange: function(event) {
      for (
          var i = 0;
          i < this.contentSpan.childNodes.length;
          i++) {
        var child = this.contentSpan.childNodes[i];
        if (child.childNodes.length > 1) {
          while (child.childNodes.length > 0) {
              var grandchild = child.childNodes[0];
            child.removeChild(grandchild);
            if (grandchild.nodeName == '#text') {
              var grandchildText = grandchild;
              grandchild = document.createElement(
                'span');
              grandchild.appendChild(grandchildText);
            }
            this.contentSpan.insertBefore(
              grandchild,
              child);
          }
          this.contentSpan.removeChild(child);
          child = this.contentSpan.childNodes[i];
        }
        if (child.nodeName == 'SPAN') {
          var childText = child.textContent,
              childClass = child.className;
          for (var j = 0; j < childText.length; j++) {
            var c = childText.charAt(j),
                className = (
                    'aeiouAEIOU'.indexOf(c) >= 0
                    ? 'vowel'
                    : '');
            if (className != childClass) {
              if (j == 0) {
                  child.className = className;
              }
              else {
                  var newChild = document.createElement(
                    'span');
                newChild.className = childClass;
                newChild.appendChild(
                  document.createTextNode(
                    childText.substring(0, j)));
                child.childNodes[0].nodeValue = (
                  childText.substring(j));
                child.className = className;
                this.contentSpan.insertBefore(
                  newChild,
                  child);
                j = childText.length;
              }
            }
          }
        }
      }
    },
    mountContentSpan: function(span) {
      this.contentSpan = span;
      var child = document.createElement('span');
      child.appendChild(document.createTextNode(
        'Type something.'));
      this.contentSpan.appendChild(child);
      this.handleChange();
    },
    render: function() {
      return React.createElement(
        'span',
        {
          id: 'z',
          onInput: this.handleChange,
          contentEditable: true,
          suppressContentEditableWarning: true,
          ref: this.mountContentSpan
        });
    }
  });

  var rootElement =
    React.createElement('div', {}, 
      React.createElement(
        'p',
        {},
        'Edit the next paragraph.'),
      React.createElement(SpanEditor)
    )

  ReactDOM.render(
    rootElement,
    document.getElementById('react-app'))

span.vowel {
  background-color: lime;
}

<div id="react-app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

回复于 2024-05-16T23:23:09+08:00

0
有一些工具可以帮助部署基于React-js代码的静态网站 . 我还没有尝试过，但看起来很有希望 .
- React static boilerplate
- Generator react component
这些都来自React-js的complementary tools列表 .
回复于 2024-05-16T23:23:09+08:00

使用React而不使用JSX突出显示语法

4 回答

相关问题