在没有JSX的情况下使用React突出显示语法

Question

我想用一个具有非常简单的语法高亮显示的文本字段构建一个React表单，但是我想在没有JSX的情况下做到这一点。 有没有办法在没有JSX的情况下使用DraftJS？

Answer 1

您可以通过使用带有contenteditable="true"的div来完成而无需Draft.js。 到目前为止，这是我已经完成的工作。 对于此示例，突出显示规则是元音应以绿色突出显示。

它的工作原理相当不错，但是我仍然需要添加代码以确保选择正确。

有没有办法使用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> 

Answer 2

当然可以。 使用draft-js使其简单得多，但是我怀疑您是否需要使用如此繁重的编辑器来完成此简单工作。 看看https://facebook.github.io/draft-js/docs/advanced-topics-decorators.html#content

Answer 3

您可以在浏览器以及ES6填充程序中运行Babel。 在这种方法中，您包括在浏览器中实现JSX和ES6的支持脚本。 Draft.js项目包含一些使用此技术的示例 。 以下是包含的支持脚本：

<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编译器。

好处是易于配置。 您可以自己托管支持脚本，也可以链接到CDN版本，例如cdnjs.com。 部署代码的新版本仅意味着编辑主脚本并部署更改的版本。

Answer 4

有一些工具可帮助基于React-js代码部署静态网站。 我还没有尝试过，但是它们看起来很有前途。

• 反应静态样板
• 发电机反应成分

这些都来自React-js的补充工具列表。