如何在草稿中将道具传递给装饰器的策略函数.js

Question

我有一个装饰器的策略函数，我想将道具传递给策略函数 我已经尝试了下面的代码，但它给了我无法读取未定义的属性属性

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

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

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