Как передать реквизит в стратегию для декоратора в draft.js

Question

У меня есть стратегическая функция для декоратора, и я хотел бы передать реквизиты в стратегическую функцию. Я пробовал приведенный ниже код, но он не позволяет мне читать реквизиты свойств undefine.

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);
   }
 })
}

props - это просто массив слов, который я получаю из 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); 
    }

  // Animation when writting in subject input
  animEditor = () => {
    var input = document.getElementById("dhad-subject");
    var wrap = document.getElementById("editor-wrap");

    if (input.value === ""){
        wrap.style.marginTop = "15%";
    wrap.style.marginRight = "20%";
      } else {
      wrap.style.marginRight = "0";
      setTimeout(function(){ wrap.style.marginTop = "0"; }, 500);
      }
  }
 //Snakbar
  snackBar =(sWord)  => {

  var cWord = sWord.parentNode.parentNode.parentNode;
  cWord.classList.remove('dh_sp_error');
  setTimeout(function(){cWord.replaceWith(cWord.textContent);}, 4000);

  var x = document.getElementById("snackbar-wrap");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);

}

render(){
    //  let worngWordsArray = this.props.errorWordslist ? this.props.errorWordslist : [];
    //   console.log("wongwordsssssssssss" , worngWordsArray);
    return(
    <Fragment>
        <main id="main-container" className="main_container">
        <section data-simplebar="init" id="editor-wrap" className="editor_wrap" ss-container='true'>
          <input type="text" id="dhad-subject" className="dhad_subject" tabIndex={-1} placeholder="عنوان الموضوع يكتب هنا" onKeyPress={this.animEditor} />
          <div 
           id="dhad-editor" 
           className="dhad_editor"  
          >
          <Editor
                  editorState={this.state.editorState}
                  onChange={this.handleChange} 
          />
          </div>
        </section>      
      </main>
      <Footer>
        <span> 0 حرف</span>
        <span> 0 كلمة </span>
        <span> 1 جملة </span>
        <span> 4 ثانية وقت التدقيق </span>
        <span> 8 ثانية وقت التحدث </span>
     </Footer>
    </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);

Answer 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
  }
]);