children 相关问题

我有一个像这样的 BillBoard 组件： const BillBoard = ({ 孩子 }) => { 返回（ <> 广告牌 { 我有一个像这样的BillBoard组件： const BillBoard = ({ children }) => { return ( <> <h2>Billboard</h2> <div className="BillBoard__frame">{children}</div> </> ) } 我将一些元素放入 BillBoard 组件中，如下所示： <BillBoard> <video width="400"> <source src="/videos/BigBuckBunnySample2.mp4" type="video/mp4" /> </video> <img width="400" src="/images/fabien-bellanger-zKFoVBS_WGE-unsplash.jpg" alt="Sea view" /> <p>Some random text that appears in a slide of the billboard</p> </BillBoard> 如何立即获取 BillBoard 组件内的元素（在本例中为 video 元素、img 元素和 p 元素），以便我可以在 div.BillBoard__frame div 内一一显示它们。您可以将孩子的类型设置为孩子的数组，代码是： <div className="BillBoard__frame">{children.map(child=>child)}</div> 在 React 中，您可以使用 React.Children 实用函数访问组件的各个子元素。在您的情况下，您可以使用 React.Children.map 迭代子元素并将它们渲染在 div.BillBoard__frame 内。你可以参考这个以下是实现此目标的方法： import React from 'react'; const BillBoard = ({ children }) => { return ( <> <h2>Billboard</h2> <div className="BillBoard__frame"> {React.Children.map(children, (child, index) => ( <div key={index} className="BillBoard__item"> {child} </div> ))} </div> </> ); }; const RenderComponent = () => { return ( <BillBoard> <video width="400"> <source src="/videos/BigBuckBunnySample2.mp4" type="video/mp4" /> </video> <img width="400" src="/images/fabien-bellanger-zKFoVBS_WGE-unsplash.jpg" alt="Sea view" /> <p>Some random text that appears in a slide of the billboard</p> </BillBoard> ); }; export default RenderComponent;

reactjs children

回答 2 投票 0

如何在 JavaScript 中获取没有子元素的元素的文本？

如何获取没有子元素的元素的文本？ element.textContent 和 element.innerText 似乎都不起作用。 HTML：测试标题噢... 如何获取没有子元素的元素的文本？ element.textContent 和 element.innerText 似乎都不起作用。 HTML： <body> <h1>Test Heading</h1> <div> Awesome video and music. Thumbs way up. Love it. Happy weekend to you and your family. Love, Sasha </div> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> fool("body"); </script> 这是 fool 函数： jQuery.fn.justtext = function(text) { return $(this).clone() .children() .remove() .end() .text(); }; function fool(el) { reverse(el); function reverse(el) { $(el).children().each(function() { if($(this).children().length > 0) { reverse(this); if($(this).justtext() != "") reverseText(this); } else { reverseText(this) } }); } function reverseText(el){ var text = el.textContent; var frag = text.toString().split(/ /); var foo = ""; var punctation_marks = [".",",","?","!"," ",":",";"]; for(i in frag){ if(punctation_marks.indexOf(frag[i]) == -1) foo += actualReverse(frag[i],punctation_marks) + " "; } el.textContent = foo; } function actualReverse(text,punctation_marks) { return (punctation_marks.indexOf(text.split("")[text.split("").length-1]) != -1)?text.split("").slice(0,text.split("").length-1).reverse().join("") + text.split("")[text.split("").length-1] : text.split("").reverse().join(""); } } 编辑：使用node.nodeType并没有真正的帮助，原因如下：想象一下以下 HTML <td class="gensmall"> Last visit was: Sat Mar 31, 2012 10:50 am <br> <a href="./search.php?search_id=unanswered">View unanswered posts</a> | <a href="./search.php?search_id=active_topics">View active topics</a> </td> 如果我使用 nodeType，只有 a 元素的文本会改变，而不是 td 本身（“上次访问......”）只需找到文本节点： var element = document.getElementById('whatever'), text = ''; for (var i = 0; i < element.childNodes.length; ++i) if (element.childNodes[i].nodeType === Node.TEXT_NODE) text += element.childNodes[i].textContent; 编辑 — 如果您想要后代（“子级”）节点中的文本，并且（现在很明显）您正在使用 jQuery： $.fn.allText = function() { var text = ''; this.each(function() { $(this).contents().each(function() { if (this.nodeType == Node.TEXT_NODE) text += this.textContent; else if (this.nodeType == Node.ELEMENT_NODE) text += $(this).allText(); }); }); return text; }; 等一下，我会测试一下:-)（似乎有效）此代码实现了与其他两个答案相同的结果，但以更具表现力、更实用的方式。所有现代浏览器（IE9 及更高版本）都支持 filter 和 map 数组方法。把这个扔在那里，因为其他答案现在有点过时了。 var content = Array.prototype.filter.call(element.childNodes, function (element) { return element.nodeType === Node.TEXT_NODE; }).map(function (element) { return element.textContent; }).join(""); 元素的文本也是一个单独的节点。考虑这段代码： <span> Some text <span>Inner text</span> More text <span>More inner text</span> Even more text </span> 当您说您想要元素的文本时，您是什么意思？只是直系孩子吗？那么这段代码可能会有所帮助： for (const element of elements) { if (element.nodeType == Node.TEXT_NODE) { // do something } } 除了像 Pointy 这样的答案之外，处理 <br/> 的换行符可以这样完成： txt = ''; for (var i = 0; i < element.childNodes.length; ++i) if (element.childNodes[i].nodeType == 3) { txt += element.childNodes[i].textContent; } else if (element.childNodes[i].nodeType == 1) { name = element.childNodes[i].nodeName || element.childNodes[i].tagName || ''; if (name.toUpperCase() == 'BR') { txt += '\n'; } } return txt;

javascript jquery text children

回答 4 投票 0

如何关注树视图孩子

我的表有父行和子行当我选择子行并删除子项时之后表切换并聚焦于父行我的问题是如何专注于儿童排重新...

python tkinter treeview children

回答 1 投票 0

如何从 SwiftData 模型创建带有子树的列表

我正在尝试使用 SwiftData 存储此模型，以便在带有子树的列表中显示它。然而 List 要求其子级与父级具有相同的类型，这对于

list swiftui children swift-data

回答 1 投票 0

如何正确获取子链接以访问 rcproject 中的文本实体？

我有一个包含文本实体的现实作曲家项目： '' ：屏幕对象，子级：1 ⟐ 转变 ⟐ 同步组件 ⟐ 锚定组件 ▿ '' ：锚实体，子级：2 ...