我有一个用于装饰器的策略函数,我想将道具传递给我尝试过以下代码的策略函数,但它使我无法读取未定义的属性道具

const  highlightWorngWords = (contentBlock, callback , props  )  => {
let text = contentBlock.getText();
let worngWords =  props.errorWordslist ? props.wongwords : []  ;
console.log('wong words', worngWords);  
let start ; 
worngWords.forEach(word => {
  start = text.indexOf(word);
  if (start !== -1) {
    callback(start, start + word.length);
   }
 })
}

道具只是从mapStateToProps中获取的一个单词数组,我确实尝试在函数内部赋值,并且它可以工作,但是当我想将道具传递给函数时,它将不起作用。将道具传递给它

import React, { Component  , Fragment} from 'react';
import { connect } from 'react-redux';
import * as actionCreators from '../../store/actions/index';
import Footer from '../Footer/Footer';
import { Editor, EditorState , CompositeDecorator   } from 'draft-js';
import HighlightedWords   from './MyComponent'
var  h2p  = require('html2plaintext');




class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { 
          editorState: EditorState.createEmpty(compositeDecorator),
          subjectTitle: "",
      } 
      this.handleChange = this.handleChange.bind(this);
      this.animEditor = this.animEditor.bind(this);

    }

    handleChange =  (editorState) =>  {
      let TextValue = editorState.getCurrentContent().getPlainText();
      this.setState({
        editorState,
      });
      var text =  h2p(editorState.getCurrentContent().getPlainText());
      console.log("satet" , text);
      this.props.onChangeText(text);
      this.props.onSpellCheck(text); 
    }


    return(
    <Fragment>
        <main id="main-container" className="main_container">
        <section data-simplebar="init" id="editor-wrap" className="editor_wrap" ss-container='true'>

          <div 
           id="dhad-editor" 
           className="dhad_editor"  
          >
          <Editor
                  editorState={this.state.editorState}
                  onChange={this.handleChange} 
          />
          </div>
        </section>      
      </main>

    </Fragment>
    );
 }
}   
const  highlightWorngWords = (contentBlock, callback)  => {
  let text = contentBlock.getText();
 let worngWords =  this.props.errorWordslist ? this.props.errorWordslist:[];
  console.log('wong words', worngWords);  
  let start ; 
  worngWords.forEach(word => {
    start = text.indexOf(word);
    if (start !== -1) {
      callback(start, start + word.length);
     }
   })
}
const compositeDecorator = new CompositeDecorator([
  {
    strategy: highlightWorngWords.bind(this), //here
    component: HighlightedWords ,
   }
 ]);
const mapStateToProps = state => {
  return {
      text: state.edi.text ,
      errorWordslist: state.edi.errorWordslist,
      correctionsList: state.edi.correctionsList 
  };
};

const mapDispatchToProps = dispatch => {
return {
    onStart: () => dispatch(actionCreators.start()),
    onChangeText: (value)   => dispatch(actionCreators.TextChange(value)),
    onSpellCheck: (word)    => dispatch(actionCreators.ErorrWordsList(word)),

}
};



export default connect( mapStateToProps , mapDispatchToProps ) (Main);

#1楼 票数:1 已采纳

道具只是我从mapStateToProps得到的单词数组

在组件类中添加函数,并保留箭头函数声明以自动绑定组件上下文。

highlightWorngWords = (contentBlock, callback)  => {
let text = contentBlock.getText();
let worngWords =  this.props.errorWordslist ? this.props.wongwords : []; //HERE
console.log('wong words', worngWords);  
let start ; 
worngWords.forEach(word => {
  start = text.indexOf(word);
  if (start !== -1) {
    callback(start, start + word.length);
   }
 })
}

然后修复构造函数中的装饰器声明以指向this.highlightWorngWords

const compositeDecorator = new CompositeDecorator([
  {
    strategy: this.highlightWorngWords, //here
    component: HighlightedWords
  }
]);

  ask by Rami Salim translate from so

未解决问题?本站智能推荐:

1回复

如何在Draft.js中使用策略功能Decorator?

我一直在Draft.js中与Decorators一起玩,但是当我无法构建自定义代码时,我会将文本发送到API,该API会收到包含在编辑器中键入的不正确单词的数组的响应,所以我正在尝试建立策略功能,将样式应用于该数组中的所有项目 我想念了什么不起作用?
1回复

在单个页面中将高阶组件与多个Draft.js编辑器一起使用

我正在制作一个由八个不同组件组成的主页,这些组件代表页面内容的各个方面。 我希望使用使用Draft.js的自定义内置InlineEditor组件可编辑其中三个。 当我最初尝试执行此操作时,第二个和第三个组件的编辑工具栏将仅在第一个组件上起作用。 因此,这是Draft.js问题。 通过创建
1回复

Draft.js样式不起作用

我正在尝试将Image.js与Draft.js一起使用。 这是我的问题。 我设法使其正常工作,但是未加载样式,并且编辑器占用了整个页面,并且按钮未进行样式设置。 我从提供的CSS加载样式 import './Draft.css'; import editorStyles fr
2回复

Draft.js和stateToHTML,如何在react组件中呈现输出html?

我的草稿js编辑器运行良好,它使用convertToRaw(editorState1.getCurrentContent())保存到我的数据库中,现在我将其恢复并使用draft-js-export-html和stateToHTML(convertFromRaw(dbContent.content
2回复

Draft.js将一个contentState插入到另一个

我有一个带有一些 HTML 的 Draft.js 编辑器。 如何在当前选择位置插入一段新的 HTML,同时保留样式和实体/块映射? 我知道如何通过Modifier.insertText插入原始文本: 但它会删除所有不正常的 HTML。 // Original HTML piece const
1回复

从Draft-js-plugins-editor导入编辑器会导致空项目出现类型错误

我在 Webstorm 中创建了一个新的 React 项目。 我已经安装了draft-js和draft-js-plugins-editor ,以及插件draft-js-hashtag-plugin和draft-js-mathjax-plugin (使用节点)。 我在他们的 Github 上关注了他们
2回复

渲染从draft-js保存的html

我正在学习React:完全是新手。 如果我直接从draft.js中保存数据库中的HTML(或者它的变体总是基于它),然后在我的React SPA的视图页面中,我通过我的API从DB中检索HTML: 问题: 我该如何呈现该HTML? dangerouslySetInnerHTM
1回复

Draft-JS提及插件-更改提及对象K/V

将我们的富文本编辑器切换到 Draft-JS,但我遇到了提及插件的问题。 提及插件需要一个对象数组,如下所示。 我的问题是我想搜索名称,但在选择时插入值 例如,当用户搜索并选择“Matthew Russel”时,“mr5058”被插入到文本字段中。 有没有人知道解决方法或解决方案?