Reactjs 如何在我的react组件中呈现draft js的LINK类型的实体映射？

我的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":{}
       }
   ]
}

我成功地用draft editor创建了一个链接类型，并且能够将它存储在数据库中，在呈现它的同时，我得到了除了链接之外的所有文本。我在我的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>

        );

render（）{
返回(
{
var nn=高于JsonFromReduxStore；
var editorState=editorState.createWithContent（convertFromRaw（JSON.parse（nn））；
报税表（
}
);

}

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

您应指定以下方式：

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

将

findLinkEntities

函数传递给

strategy

属性，并将

Link

react组件传递给

component

属性：

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

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

const{Editor，compositecorator，convertFromRaw，EditorState}=Draft；
常量initialStateRaw={
“entityMap”：{
"0":{
“类型”：“链接”，
“可变性”：“可变性”，
“数据”：{“url”：“www.google.co.in”}
}
},
“区块”：[
{
“钥匙”：“9k5h7”，
“文本”：“这是链接”，
“类型”：“未设置样式”，
“深度”：0，
“inlineStyleRanges”：[]，
“暴君”：[
{
“抵销”：12，
“长度”：4，
“键”：0
}
],
“数据”：{}
}
]
};
函数findLinkEntities（contentBlock、回调、contentState）{
contentBlock.findEntityRanges(
（字符）=>{
const entityKey=character.getEntity（）；
返回(
entityKey！==null&&
contentState.getEntity（entityKey）.getType（）=='LINK'
);
},
回拨
);
}
常量链接=（道具）=>{
const{url}=props.contentState.getEntity（props.entityKey.getData（）；
返回(
);
};
类容器扩展了React.Component{
建造师（道具）{
超级（道具）；
常量装饰器=新的复合装饰器([
{
战略：FindLink实体，
组成部分：链接，
},
]);
此.state={
editorState:editorState.createWithContent（convertFromRaw（initialStateRaw），decorator）
};
}
_handleChange=（编辑状态）=>{
this.setState（{editorState}）；
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'react-root'））

正文{
字体系列：Helvetica，无衬线；
}
.容器根{
边框：1px纯黑；
填充物：5px；
保证金：5px；
}

---

您还可以添加

className

链接，然后在

entityMap[n].data

中获取

className

，它可以用作

const{url，className}=props.contentState.getEntity（props.entityKey）.getData（）；

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