對不起,我是 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
);
}
})
我在 HTML 之類的代碼中插入了一些 div 標簽和 p 標簽,但一直給我錯誤。我想我以后需要研究一下 LOL
uj5u.com熱心網友回復:
嗯,這是一個棘手的問題。無法在 React js 檔案中直接使用 HTML 的問題。為了讓事情正常作業,你需要一個 babel 編譯器,它將用 React 物件替換你的 HTML 標記。
您使用已編譯代碼 (React.createElement) 對其進行采樣的代碼。您必須將此資料作為某些反應組件的子級傳遞以使其作業。
所以或者你在這里使用輸入鏈接描述或使用 Babel 編譯器來準備你的代碼。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/486383.html
標籤:javascript html 反应 WordPress
