簡體 English 中英

如何將 rebass 'Text'(div) 組件更改為其他語義元素？

[英]How can I change rebass 'Text'(div) component to other semantic element?

原文 2020-12-24 07:59:56 4 1 reactjs/ semantic-markup/ rebass

文本組件的默認 HTML 元素是 div。 我想將 Text 組件 HTML 元素更改為其他標簽，例如 H1、H2、H3 和 P 以獲取語義。 如何將 rebass Text 組件 HTML 元素更改為其他標簽以實現語義？

1 個解決方案

Rebass Text 組件具有支持語義的“as”道具。

<Text as="h1">Hello World</Text>

更改語義 UI 按鈕組件中的文本顏色

[英]Change text color in Semantic UI button Component

當其他組件的狀態改變時我該如何獲取

[英]How can I get when state change from other component

如何在 Semantic UI React 中以編程方式聚焦 Search 組件？

[英]How can I focus a Search component programmatically in Semantic UI React?

如何測試 div 元素的內部文本

[英]How can I test inner text of a div element

如何在 React 組件中獲得焦點元素並更改 state？

[英]How can I get focused element and change state in React component?

如何導入另一個組件但不將該其他元素渲染到 div？

[英]How do I import another component but not have that other element render to a div?

我該如何渲染<card.text>作為<div>元素而不是作為<p> ?</p></div><div id="text_translate"><p> 對於<Card.Body>似乎有一個名為as的<em>參數</em>，其類型為elementType ，默認為<div> 。</p><p> <a href="https://react-bootstrap.github.io/components/cards/#card-body-props" rel="nofollow noreferrer">https://react-bootstrap.github.io/components/cards/#card-body-props</a></p><p> 現在<Card.Text>默認為<p>這會導致我的網站上出現警告，因為我在<Card.Text>中嵌套了<div>元素</p><blockquote><p>警告：validateDOMNesting(...): 不能作為<p>的后代出現</p></blockquote><p>所以基本上兩個問題：</p><ol><li><p> 如何更改/設置Card.Body上的元素類型？以下嘗試未反映在生產的 html 中（使用 Chrome DevTools 檢查）： <Card.Body as="p">...</Card.Body>也沒有此<Card.Body as="<p>">...</Card.Body></p></li><li><p> 如何更改<Card.Text>上的元素類型？</p></li></ol><hr><p> 這就是我的組件的樣子</p><pre>import React from "react" import { Link } from "gatsby" import Img from "gatsby-image" import Card from "react-bootstrap/Card" import Tags from "./tags" import TimeToRead from "./time-to-read" const Post = ({ title, slug, date, body, fluid, tags, timeToRead }) => { return ( <Card className="mb-3 shadow-lg" bg="concrete" id="hoverable"> <Link to={slug}> <Img className="card-image-top" style={{ maxHeight: "150px" }} fluid={fluid} ></Img> <Card.ImgOverlay style={{ pointerEvents: "none", }} > <Tags tags={tags} /> </Card.ImgOverlay> </Link> <Card.Body> <Card.Title>{title}</Card.Title> <Card.Subtitle> <div className="d-flex justify-content-between"> <span className="text-info">{date}</span> <TimeToRead minutes={timeToRead} /> </div> </Card.Subtitle> <hr /> <Card.Text as="div">{body}</Card.Text> <Link to={slug} className="btn btn-outline-primary float-right text-uppercase" > Read more </Link> </Card.Body> </Card> ) } export default Post</pre></div></card.text>

[英]How can I render <Card.Text> as <div> element and not as <p>?

如何僅更改反應組件的突出顯示文本顏色？

[英]how can I change highlight text color for only a react component?

單擊其他組件中的某個按鈕時更改語義 UI 選項卡

[英]Change Semantic UI Tabs on click of some button in other component

如何設計 Rebass Switch 的樣式

[英]How to style Rebass Switch

暫無

暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 更改語義 UI 按鈕組件中的文本顏色當其他組件的狀態改變時我該如何獲取如何在 Semantic UI React 中以編程方式聚焦 Search 組件？如何測試 div 元素的內部文本如何在 React 組件中獲得焦點元素並更改 state？如何導入另一個組件但不將該其他元素渲染到 div？我該如何渲染<card.text>作為<div>元素而不是作為<p> ?</p></div><div id="text_translate"><p> 對於<Card.Body>似乎有一個名為as的<em>參數</em>，其類型為elementType ，默認為<div> 。</p><p> <a href="https://react-bootstrap.github.io/components/cards/#card-body-props" rel="nofollow noreferrer">https://react-bootstrap.github.io/components/cards/#card-body-props</a></p><p> 現在<Card.Text>默認為<p>這會導致我的網站上出現警告，因為我在<Card.Text>中嵌套了<div>元素</p><blockquote><p>警告：validateDOMNesting(...): 不能作為<p>的后代出現</p></blockquote><p>所以基本上兩個問題：</p><ol><li><p> 如何更改/設置Card.Body上的元素類型？以下嘗試未反映在生產的 html 中（使用 Chrome DevTools 檢查）： <Card.Body as="p">...</Card.Body>也沒有此<Card.Body as="<p>">...</Card.Body></p></li><li><p> 如何更改<Card.Text>上的元素類型？</p></li></ol><hr><p> 這就是我的組件的樣子</p><pre>import React from "react" import { Link } from "gatsby" import Img from "gatsby-image" import Card from "react-bootstrap/Card" import Tags from "./tags" import TimeToRead from "./time-to-read" const Post = ({ title, slug, date, body, fluid, tags, timeToRead }) => { return ( <Card className="mb-3 shadow-lg" bg="concrete" id="hoverable"> <Link to={slug}> <Img className="card-image-top" style={{ maxHeight: "150px" }} fluid={fluid} ></Img> <Card.ImgOverlay style={{ pointerEvents: "none", }} > <Tags tags={tags} /> </Card.ImgOverlay> </Link> <Card.Body> <Card.Title>{title}</Card.Title> <Card.Subtitle> <div className="d-flex justify-content-between"> <span className="text-info">{date}</span> <TimeToRead minutes={timeToRead} /> </div> </Card.Subtitle> <hr /> <Card.Text as="div">{body}</Card.Text> <Link to={slug} className="btn btn-outline-primary float-right text-uppercase" > Read more </Link> </Card.Body> </Card> ) } export default Post</pre></div></card.text> 如何僅更改反應組件的突出顯示文本顏色？單擊其他組件中的某個按鈕時更改語義 UI 選項卡如何設計 Rebass Switch 的樣式

相關標簽

粵ICP備18138465號 © 2020-2024 STACKOOM.COM