Как передать props в функцию стратегии для декоратора в draft.js

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

const  highlightWorngWords = (contentBlock, callback , props  )  => {
let text = contentBlock.getText();
let worngWords =  props.errorWordslist ? props.wongwords : []  ;
console.info('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.handleChangeEvent = this.handleChangeEvent.bind(this);
      this.animEditor = this.animEditor.bind(this);

    }

    handleChangeEvent =  (editorState) =>  {
      let TextValue = editorState.getCurrentContent().getPlainText();
      this.setState({
        editorState,
      });
      var text =  h2p(editorState.getCurrentContent().getPlainText());
      console.info("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.handleChangeEvent} 
          />
          </div>
        </section>      
      </main>

    </Fragment>
    );
 }
}   
const  highlightWorngWords = (contentBlock, callback)  => {
  let text = contentBlock.getText();
 let worngWords =  this.props.errorWordslist ? this.props.errorWordslist:[];
  console.info('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);
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 759
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

the props is just an array of words I am getting it from mapStateToProps

добавьте функцию в класс компонента и сохраните объявление функции стрелки для автоматической привязки контекста компонента.

highlightWorngWords = (contentBlock, callback)  => {
let text = contentBlock.getText();
let worngWords =  this.props.errorWordslist ? this.props.wongwords : []; //HERE
console.info('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
  }
]);

спасибо за ваш ответ, но он показывает тот же результат

Rami Salim 12.10.2018 19:20

вот как я пытаюсь получить доступ к реквизитам, пусть worngWords = this.props.errorWordslist? this.props.errorWordslist: []; Все в порядке ?

Rami Salim 12.10.2018 19:20

вы изменили код функции highlightWorngWords, поэтому не работает :) восстановите ее как было, обратитесь к this.props внутри нее.

Karim 12.10.2018 19:24

Я восстанавливаю его обратно, я все еще получаю ту же ошибку

Rami Salim 12.10.2018 19:34

Я обновил код для всего компонента, вы можете это проверить

Rami Salim 12.10.2018 19:38

вы продолжаете изменять код, помещайте экземпляр композитногоDecorator в класс компонента (не за его пределы), иначе вы привяжете неопределенное «this» к функции. проверьте обновленный ответ :)

Karim 13.10.2018 17:33

Я добавил CompositeDecorator в конструктор и привязал к нему функцию. но я все еще воспринимаю это как неопределенное, когда говорю о нем. пожалуйста проверьте это codeandbox.io/s/627qz39x83

Rami Salim 14.10.2018 04:43

Спасибо, я очень признателен за вашу помощь

Rami Salim 14.10.2018 19:32

рад что помог;)

Karim 14.10.2018 19:59

что, если я хочу создать объект для отображения метаданных для каждого дочернего элемента в компоненте декоратора?

Rami Salim 20.10.2018 21:42

@RamiSalim, я не знаю эту библиотеку, я не могу вам помочь, если вам нужна более конкретная помощь по draft.js, попробуйте открыть новую тему

Karim 21.10.2018 23:23

Другие вопросы по теме