无法使用 react-native-render-html 呈现 <input> HTML 标记

Unable to render the <input> HTML tag using react-native-render-html

提问人:Pratham Kumar 提问时间:7/31/2023 更新时间:7/31/2023 访问量:112

问:

输入标记未呈现

尝试使用此包呈现标记,但作为回报,它会在控制台中发出警告,即: “input”标记是有效的 HTML 元素,但不由此库处理。您必须使用“customHTMLElementModels”属性扩展此标记的默认 HTMLElementModel,并确保其内容模型未设置为“none”。我添加了以下代码来删除上述警告

TypeScript 代码

const source = {
  html: `
  <h1>Hello</h1>
  <input type='text'>
  <h1>Bye</h1>
  `,
};

const customHtmlModel = {
 input: defaultHTMLElementModels.input.extend({
  mixedUAStyles: {
    width: 150,
    height: 40,
    backgroundColor: 'yellow',
  },
  contentModel: HTMLContentModel.none,
 }),
};

渲染标签

<RenderHTML
        contentWidth={width}
        source={source}
        customHTMLElementModels={customHtmlModel}
/>```



All I can see is a plain yellow box, but it is not clickable and does not act like an input tag. 

How can I render an input field using this library? What steps needs to be taken.
HTML 输入 警告 呈现

评论


答:

0赞 Muhammad Jawad Mansoor 7/31/2023 #1

每件事都是完美的,只需更改以下内容:

const customHtmlModel = {
  input: defaultHTMLElementModels.input.extend({
    mixedUAStyles: {
      width: 150,
      height: 40,
      backgroundColor: 'yellow',
    },
    contentModel: HTMLContentModel.void, // change this from none to void
  }),
};

评论

0赞 Pratham Kumar 8/1/2023
您好,我将 HTMLContentModel 从 none 更改为 void,它使警告再次在我的模拟器中弹出。并且黄色框也不再渲染。