如何在我的 React 组件中渲染草稿 js 类型 LINK 的实体图？

Question

我的 redux 存储中有这些数据，我想在我的 react 组件中呈现这些数据。

{
"entityMap":{
      "0":{
           "type":"LINK",
           "mutability":"MUTABLE",
           "data":{"url":"www.google.co.in"}
          }
       },
"blocks":[
      {
        "key":"9k5h7",
         "text":"this is the link", 
         "type":"unstyled",
         "depth":0,
         "inlineStyleRanges":[],
         "entityRanges":[
             {
                "offset":12,
                "length":4,
                "key":0
             }
          ],
         "data":{}
       }
   ]
}

我成功地使用草稿编辑器创建了一个链接类型，并且能够将它存储在数据库中，并且在渲染它时我得到了除链接之外的整个文本。我的 redux 中有这个链接信息，即“实体映射”和“块”内的“entityRanges”，它告诉链接从哪个偏移量开始以及长度是多少。例如，在我的情况下，它是“这是链接”中的“链接”。

这是我用来从我的 redux 呈现上述 json 的代码：

render(){
     return(
            <div>

                {
                    var nn = abovejsonfromreduxstore;
                    var editorState = EditorState.createWithContent(convertFromRaw(JSON.parse(nn)));
               return (        
                      <div>
                          <pre>
                              <Editor 
                                  editorState={editorState}
                                  readOnly 
                               />
                          </pre>
                       </div>
                   </div>
               }

        </div>

        );

}

如何修改此呈现方法以使其也呈现链接实体？

Answer 1

你应该这样指定draft.js装饰器：

const decorator = new CompositeDecorator([
  {
    strategy: findLinkEntities,
    component: Link,
  },
]);

将findLinkEntities函数传递给strategy属性并将Link组件反应到component属性：

function findLinkEntities(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(
    (character) => {
      const entityKey = character.getEntity();
      return (
        entityKey !== null &&
        contentState.getEntity(entityKey).getType() === 'LINK'
      );
    },
    callback
  );
}


const Link = (props) => {
  const {url} = props.contentState.getEntity(props.entityKey).getData();
  return (
    <a href={url}>
      {props.children}
    </a>
  );
};

之后将此装饰器传递给createWithContent方法：

this.state = {
  editorState: EditorState.createWithContent(convertFromRaw(initialStateRaw), decorator)
};

检查下面隐藏片段中的工作示例：

const decorator = new CompositeDecorator([
  {
    strategy: findLinkEntities,
    component: Link,
  },
]);

function findLinkEntities(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(
    (character) => {
      const entityKey = character.getEntity();
      return (
        entityKey !== null &&
        contentState.getEntity(entityKey).getType() === 'LINK'
      );
    },
    callback
  );
}


const Link = (props) => {
  const {url} = props.contentState.getEntity(props.entityKey).getData();
  return (
    <a href={url}>
      {props.children}
    </a>
  );
};

this.state = {
  editorState: EditorState.createWithContent(convertFromRaw(initialStateRaw), decorator)
};