我對(duì)反應(yīng)還很陌生，只是想在我深入其中并必須回去改變一切之前先起步。我想知道如何在 React 中處理語義 html。<header>諸如、<nav>、等之類的東西。<aside>我知道這些標(biāo)簽對(duì)于可訪問性等原因非常重要，并且我希望在我的 React 應(yīng)用程序中具有相同類型的結(jié)構(gòu)。我只是不知道該怎么做。在網(wǎng)上閱讀有關(guān)它的內(nèi)容時(shí)，我發(fā)現(xiàn)這<fragment>可能是我應(yīng)該使用的東西，但它似乎沒有實(shí)現(xiàn)我想要的語義 html 的可訪問性部分。你如何將語義 html 合并到 React 中？還有一個(gè)可能的第二個(gè)問題，它如何與組件一起工作？如果我有多個(gè)組件，每個(gè)組件都有一個(gè)<header>或某個(gè)東西，那么反應(yīng)如何編譯它？我在每個(gè)組件中都會(huì)有一個(gè)<header>and嗎？<footer>或者我的導(dǎo)航欄組件將被包含在其中<header>，而我的頁腳組件將被包含在其中<footer>，而其他所有組件都會(huì)有自己的<main>？在這一點(diǎn)上，我覺得我想得太多了，但當(dāng)我嘗試開始實(shí)際寫作時(shí)，我陷入了困境。
1 回答
繁花不似錦
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊
看來你確實(shí)想多了。React 允許您使用任何類型的有效 HTML 元素（語義或非語義）構(gòu)建和組合組件。
建立可訪問的網(wǎng)站是一個(gè)很好的做法?？紤]到這一點(diǎn)，您可以將各種語義元素劃分為組件。這些組件可以是類組件或功能組件?（如果您使用React Hooks，它們都是功能組件）。
這是一個(gè)簡(jiǎn)單的例子：
class App extends React.Component {
? state = {
? ? name: 'Amazing Startup'
? }
??
? render() {
? ? return(
? ? ? <React.Fragment>
? ? ? ? <Header name={this.state.name}/>
? ? ? ? <Main />
? ? ? ? <Footer />
? ? ? </React.Fragment>
? ? )
? }
}
function Header({ name }) {
? return (
? ? <header>
? ? ? <h1>Hello! We are {name}</h1>
? ? </header>
? )
}
function Main() {
? return (
? ? <main>
? ? ? <p>Important stuff goes here..</p>
? ? </main>
? )
}
function Footer() {
? return (
? ? <footer>
? ? ? <p>Made with React - 1 Hacker Way Menlo Park, CA 94025</p>
? ? </footer>
? )
}
ReactDOM.render(<App />, document.getElementById('root'));
body {
? font-family: sans-serif;
? ?min-height: 100vh;
? ?margin: 0;
}
#root {
? display: grid;
? grid-template-columns: 1fr;
? grid-template-rows: 1fr 2fr 1fr;
}
header {
? font-size: 0.8rem;
? background-color: deepskyblue;
? padding: 0.5rem;
}
main {
? background-color: limegreen;
? padding: 0.5rem;
}
footer {
? background-color: orange;
? padding: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
值得注意的是，您絕對(duì)可以將所有必需的 HTML 元素放置在單個(gè)組件中。然而，分離功能是件好事，這反過來又會(huì)教您如何組合組件，這是它們的主要設(shè)計(jì)原則之一。
慕慕森
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊
所有支持的 html 屬性
JSX 支持所有 html 標(biāo)簽。所有正常的 html 語義都適用于 React JSX。
Fragment
React.Fragment 組件允許您在 render() 方法中返回多個(gè)元素，而無需創(chuàng)建額外的 DOM 元素
正確的 React JSX 語法是每個(gè) React 組件返回一個(gè)節(jié)點(diǎn)，通常實(shí)現(xiàn)如下
render?(
??<div>
????{?/*?multiple?children?*/?}
??</div>
);但這基本上將一個(gè)無用的 div 注入到 DOM 中。Fragment允許以下不會(huì)污染 DOM 的操作。
render?(??<Fragment>
????{?/*?multiple?children?*/?}
??????</Fragment>)
??????;- 1 回答
- 0 關(guān)注
- 178 瀏覽
添加回答
舉報(bào)
0/150
提交
取消