- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有两个函数,一个用于解析 html 字符串以将其 header 放入数组中
const str = "<h1>test-1<h1><h2>test1-1<h2><h3>test1-1-1</h3><h1>test1-2<h1><h2>test1-2-1</h2><h3>test1-2-2</h3><h1>test-2</h1><h1>test-3</h1><h1>test-4</h1>
"
const wrapper = document.createElement('div');
wrapper.innerHTML = str.trim();
let tree = [];
let leaf = null;
for (const node of wrapper.querySelectorAll("h1, h2, h3, h4, h5, h6"))
{
const nodeLevel = parseInt(node.tagName[1]);
const newLeaf = { level: nodeLevel, text: node.textContent, children: [], parent: leaf };
while (leaf && newLeaf.level <= leaf.level)
leaf = leaf.parent;
if (!leaf)
tree.push(newLeaf);
else
leaf.children.push(newLeaf);
leaf = newLeaf;
}
另一个将这些标题解析为目录功能的列表
const ol = document.createElement("ol");
(function makeOl(ol, leaves)
{
for (const leaf of leaves)
{
const li = document.createElement("li");
li.appendChild(new Text(leaf.text));
if (leaf.children.length > 0)
{
const subOl = document.createElement("ol");
makeOl(subOl, leaf.children);
li.appendChild(subOl);
}
ol.appendChild(li);
}
})(ol, tree);
它输出这样的字符串
"<ol><li>test-1<ol><li>test1-1<ol><li>test1-1-1</li></ol></li><li>test1-2<ol><li>test1-2-1</li><li>test1-2-2</li></ol></li></ol></li><li>test-2</li><li>test-3</li><li>test-4</li></ol>"
渲染成类似
我还在习惯 React 的 jsx 部分,我想知道如何转换该函数,以便 ol 和 li 是 React/jsx 元素,而不是原始 html 字符串,因为这需要另一个步骤渲染例如。
<div dangerouslySetInnerHTML={{__html: olString}} />
我习惯使用 jsx 和数组的方式是这样的
const list = tree.map((headers) => <li>{headers.value}</li>)
<div><ul>{list}</ul></div>
最佳答案
您始终可以使用React.createElement
例如
React.createElement('div', null, `Hello ${this.props.toWhat}`);
但是,最佳实践可能是这样的。
// reusable Tree component
export default class Tree extends Component {
static propTypes = {
children: PropTypes.array.isRequired
}
render() {
const { children } = this.props
return (
<ol>
{children.map(leaf =>
<li key={leaf.id}>
<span>{leaf.text}</span>
{leaf.children && <Tree children={leaf.children}/>}
</li>
)}
</ol>
)
}
}
// (re)use it
function render() {
return (
<Tree children={ tree } />
);
}
您甚至可以将 HTML 元素设置为变量。
<Tree children={ tree } listNode="ul" listElementNode="li" />
然后在树组件中
function render() {
const {listNode: UL, listElementNode: LI} = this.props;
return (<UL></UL>);
}
关于javascript - 将函数转换为 jsx,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50469557/
typescript 抛出: Cannot use JSX unless the '--jsx' flag is provided.ts(17004) 更改后tsconfig.json jsx至 re
我正在尝试使用 JSX 表达式作为另一个 JSX 表达式的生成主体的一部分: render() { return ( {[...Array(5).keys()].
eslint jsx-quotes 规则在 Visual Studio 代码中不起作用。配置: .eslintrc.json: { "plugins": ["jsx"], "parse
如果我声明 var A = new Set(...........); var B = new Set(...........); 是否有 JSX 操作来计算两组 A - B 的差异? 最佳答案
这个问题在这里已经有了答案: How to render react components by using map and join? (18 个答案) 关闭 5 年前。 我遇到过这样的情况,我有
完成执行另一个 .jsx 脚本后,如何让我的 .jsx 脚本? 也许这将有助于理解我正在尝试做的事情: // WebCard.jsx file function mySnippet(){ //
JSX 不允许多次指定一个属性。 F.ex. /* /* where obj contains an attribute called "prop1" */ 属性的顺
我在尝试使用循环数组构建自定义组件时遇到问题,该循环数组有条件地呈现不同的元素。该组件包含特殊的类名,用于生成每行 3 个元素的网格,与传递给组件的参数数量无关。 我正在使用 map用于遍历条件索引,
我有一个要从 JS 转换为 TS 的 React 项目。我遇到的一个问题是 TSX React 假设功能组件中定义的所有属性都是必需的 Prop 。 // ComponentA.tsx class C
我有一个通过数组映射的 React 组件。 每个数组项都有一个可选的 ID 类型。 如果我有这个 ID,我将渲染一个元素,否则什么都不渲染。 这个元素有一个 onClick 调用函数接受 ID 作为参
我目前正在编写一个带有 ref 元素的 StencilJS 组件,我需要将其作为 @Prop 传递给另一个元素。像这样: this.canvas = el}> 创建颜色选择器时,this.canv
我正在尝试将对象传递给 react 中的 jsx 标记的值 我将标签选项的值设置为一个对象 onChange 我得到了标签 中的值并用值设置本地状态 我控制台记录了本地状态,但它返回了 [objec
我正在尝试使用 Chart.js 和 Typescript 在 React 中构建应用程序,但是当尝试渲染折线图时,我在这一行收到上述错误: . 除此之外,我还收到消息“类型‘ChartCompone
我正在使用一个变量来有条件地显示不同的 JSX,并且它没有使用在其父函数中定义的样式。我怎样才能做到这一点? 您可以在此处查看演示:https://codesandbox.io/s/styled-js
使用 Nextjs 和 styled-jsx 我编写了下面的组件。 现在我想知道如何将 styled-jsx 应用于从 getLinks 方法返回的 jsx。 在下面的示例中,来自 getLinks
所以我现在的问题是,如果我有一个 JSX 父组件,但我需要包含一个 html 标签,例如 我认为 React JSX 不支持它(如果我错了请纠正我)我可以混合使用 jsx 和非 jsx 组件吗?我个人
我正在编写一个 react 应用程序来从嵌套对象数组中打印 TreeView 。每个节点都应该是可折叠的(默认打开)。一个节点可以有任意数量的子节点。这是我想要实现的示例: 我正在将所有节点组件收集到
它不是 React 项目,也不是 V-DOM 相关的。我只需要一个 jsx 运行时编译器到 (HTML/XML) 字符串,稍后将用作 element.innerHTML = result 它应该用作支
当 jsx 跨越多行时,哪种 eslint 规则更喜欢前者而不是后者?目前 prettier 正在从 preferred 变为 notPreferred const preferred = (
我正在使用 IDEA 2017.2。我需要设置 JSX codestyle,这样大括号之间就有空格,比如 { event.series } 。但是,它会将其自动格式化为 {event.series}
我是一名优秀的程序员,十分优秀!