Question

我正在努力用Draft.js建模我的某个用例。我通过使用正则表达式策略在复合装饰器中突出显示编辑器中的某些单词/短语。

我想要存档的是：如果用户点击装饰的单词，我想切换它的状态并以某种方式存储它。

我该怎么做？有线索吗？

在更高的层次上，它基本上是一种忽略某些装饰词的方法，即使它们与正则表达式策略相匹配

我认为也许实体可以帮助我在这里完成工作，他们会允许我在装饰的单词上存储这样的元信息（例如：忽略），对吗？

Answer 1

当我遇到类似问题时，我使用渲染组件的存储来存储条件。您可以在此处使用功能组件：

renderAnnotation(type){
    return (props)=> {
        return (<span className={type} onClick={this.ignoreDecoratedWord.bind(this, props)}>{props.children}</span>);
    };
}

您可以更改它并使用标准反应组件：

renderAnnotation(type){
    return (props)=> {
        return (<HighlightedWord type={type} {...props} />);
    };
}

HighlightedWord组件是：

class HighlightedWord extends React.Component {
    constructor() {
    super();

    this.state = { enable: true }
  }

  toggleStatus = () => {
    this.setState({ enable: !this.state.enable });
  }

  render() {
    return (
      <span className={this.state.enable ? this.props.type : ''} onClick={this.toggleStatus}>{this.props.children}</span>
    )
  }
}

我们在点击事件后切换突出显示状态。

检查this demo。

如何在使用具有正则表达式策略的装饰器时将元数据添加到特定单词并将其转换为自定义类型？

1 个答案: