我對反應還很陌生，只是想在我深入其中并必須回去改變一切之前先起步。我想知道如何在 React 中處理語義 html。<header>諸如、<nav>、等之類的東西。<aside>我知道這些標簽對于可訪問性等原因非常重要，并且我希望在我的 React 應用程序中具有相同類型的結構。我只是不知道該怎么做。在網上閱讀有關它的內容時，我發現這<fragment>可能是我應該使用的東西，但它似乎沒有實現我想要的語義 html 的可訪問性部分。你如何將語義 html 合并到 React 中？還有一個可能的第二個問題，它如何與組件一起工作？如果我有多個組件，每個組件都有一個<header>或某個東西，那么反應如何編譯它？我在每個組件中都會有一個<header>and嗎？<footer>或者我的導航欄組件將被包含在其中<header>，而我的頁腳組件將被包含在其中<footer>，而其他所有組件都會有自己的<main>？在這一點上，我覺得我想得太多了，但當我嘗試開始實際寫作時，我陷入了困境。
1 回答
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
看來你確實想多了。React 允許您使用任何類型的有效 HTML 元素（語義或非語義）構建和組合組件。
建立可訪問的網站是一個很好的做法?？紤]到這一點，您可以將各種語義元素劃分為組件。這些組件可以是類組件或功能組件?（如果您使用React Hooks，它們都是功能組件）。
這是一個簡單的例子：
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>
值得注意的是，您絕對可以將所有必需的 HTML 元素放置在單個組件中。然而，分離功能是件好事，這反過來又會教您如何組合組件，這是它們的主要設計原則之一。
慕慕森
TA貢獻1856條經驗 獲得超17個贊
所有支持的 html 屬性
JSX 支持所有 html 標簽。所有正常的 html 語義都適用于 React JSX。
Fragment
React.Fragment 組件允許您在 render() 方法中返回多個元素，而無需創建額外的 DOM 元素
正確的 React JSX 語法是每個 React 組件返回一個節點，通常實現如下
render?(
??<div>
????{?/*?multiple?children?*/?}
??</div>
);但這基本上將一個無用的 div 注入到 DOM 中。Fragment允許以下不會污染 DOM 的操作。
render?(??<Fragment>
????{?/*?multiple?children?*/?}
??????</Fragment>)
??????;- 1 回答
- 0 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消