我可以在 React 代码中写 HTML 标签吗？

Question

抱歉，我是 React 新手。这可能是一个愚蠢的问题，但我可以在 React 代码中编写 HTML 代码吗？我正在尝试为我的 wordpress 主题创建一个自定义块，并找到了 JavaScript.

的示例代码

/* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it'll include. */
  
wp.blocks.registerBlockType('coin-info/border-box', {
    title: 'color-info',
    icon: 'money-alt',
    category: 'common',
    attributes: {
      content: {type: 'string'},
      color: {type: 'string'}
    },
    
  /* This configures how the content and color fields will work, and sets up the necessary elements */
    
    edit: function(props) {

      function updateContent(event) {
        props.setAttributes({content: event.target.value})
      }
      function updateColor(value) {
        props.setAttributes({color: value.hex})
      }
      return (
        "div",
        null,
        React.createElement(
          "h3",
          null,
          "Simple Box"
        ),
        React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
        React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
      );

    },
    
    save: function(props) {

      return wp.element.createElement(
        "h1",
        { style: { border: "3px solid " + props.attributes.color } },
        props.attributes.content
      );

    }
  })

我在代码中插入了一些 div 标签和 p 标签，例如 HTML，但总是报错。我想我以后需要研究一下 LOL

Answer 1

好吧，这是个棘手的问题。 React js文件中不能直接使用HTML的问题。为了让事情正常进行，你需要一个 babel 编译器，它将用 React 对象替换你的 HTML 标签。

您使用编译代码对其采样的代码 (React.createElement)。您必须将此数据作为某个 React 组件的子项传递才能使其正常工作。

所以或者您使用 enter link description here 或使用 Babel 编译器来准备您的代码。

我可以在 React 代码中写 HTML 标签吗？

Can I write HTML tags inside of a React code?

javascript

html

reactjs

wordpress