У меня есть функция стратегии для декоратора, и я хотел бы передать реквизиты функции стратегии Я пробовал приведенный ниже код, но он не позволяет мне читать свойства 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);



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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
}
]);
вот как я пытаюсь получить доступ к реквизитам, пусть worngWords = this.props.errorWordslist? this.props.errorWordslist: []; Все в порядке ?
вы изменили код функции highlightWorngWords, поэтому не работает :) восстановите ее как было, обратитесь к this.props внутри нее.
Я восстанавливаю его обратно, я все еще получаю ту же ошибку
Я обновил код для всего компонента, вы можете это проверить
вы продолжаете изменять код, помещайте экземпляр композитногоDecorator в класс компонента (не за его пределы), иначе вы привяжете неопределенное «this» к функции. проверьте обновленный ответ :)
Я добавил CompositeDecorator в конструктор и привязал к нему функцию. но я все еще воспринимаю это как неопределенное, когда говорю о нем. пожалуйста проверьте это codeandbox.io/s/627qz39x83
Спасибо, я очень признателен за вашу помощь
рад что помог;)
что, если я хочу создать объект для отображения метаданных для каждого дочернего элемента в компоненте декоратора?
@RamiSalim, я не знаю эту библиотеку, я не могу вам помочь, если вам нужна более конкретная помощь по draft.js, попробуйте открыть новую тему
спасибо за ваш ответ, но он показывает тот же результат