据我所知,这是对的:

<div>
  <p>some words</p>
</div>

但这是错误的:

<p>
  <div>some words</div>
</p>

第一个可以通过w3c验证器(xhtml 1.0),但第二个不能.我知道没有人会像第二个那样编写代码.我只是想知道为什么.那么其他标签的遏制关系呢？

问题

我正在尝试找到一种使用 React 18 来实现 Island 架构的方法。

我正在尝试的页面看起来像这样

import React from 'react'
import { Counter } from './Counter'

export { Page }

function Page() {
  return (
    <>
      <h1>Welcome</h1>
      This page is:
      <ul>
        <li>Rendered to HTML.</li>
        <li>
          Non-Interactive <Counter />
          Non-Interactive <Counter />
          Non-Interactive <Counter />
        </li>
        <li>
          Interactive0. <Counter island="Counter:0" /><br/>
          Interactive1. <Counter island="Counter:1" /><br/>
          Interactive2. <Counter island="Counter:2" /><br/>
        </li>
      </ul>
    </>
  )
}

后三个带有island=""道具标记，表明它们是需要补水的岛屿。

到目前为止我尝试过的

我最初处理这项任务的方式是

1. 寻找一个岛屿
2. 复制它的兄弟姐妹
3. 给岛屿补充水分
4. 把姐弟俩放回去

按照这个想法，我编写了以下客户端代码。

const tags = document.querySelectorAll("[island]");

for …

我有以下代码，

const Layout: React.FC<LayoutProps> = ({ children }) => {
    const darkMode = useRecoilValue(darkModeAtom)
    
    console.log('darkMode: ', darkMode)
    return (
        <div className={`max-w-6xl mx-auto my-2 ${darkMode ? 'dark' : ''}`}>
            <Nav />
            {children}
            <style jsx global>{`
                body {
                    background-color: ${darkMode ? '#12232e' : '#eefbfb'};
                }
            `}</style>
        </div>
    )
}

我正在使用 recoil 和recoil-persist。那么，当 darkMode 值为 true 时，className 应该包含一个 dark 类，对吧？但事实并非如此。我不知道这里出了什么问题。但是第一次刷新的时候不行，之后就正常了。我还尝试使用 darkMode === true 条件，但它仍然不起作用。您会看到样式化的 jsx，效果很好。这随着 darkMode 值的变化而变化，当我刷新时，它会保留数据。但是当我检查时，我没有在第一个 div 中看到黑暗类。另外，当我 console.log darkMode 值时，我看到 true，但不包括 dark 类。

这是沙盒链接

也许这是一个愚蠢的错误，但我在这上面浪费了很多时间。那么我在这里做错了什么？

正如标题所述，我正在使用 NextJS 创建一个网站，并使用 TailwindCSS 进行样式设置。但是，我的代码有一个小而烦人的问题。

下面是我的页面 MainContent 代码：

"use client"
import React, {useState} from 'react';

export default function MainContent(){
    const [eventTerm, setSearchTerm] = useState('');
    const [zipCode, setZipCode] = useState('');

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      setSearchTerm(event.currentTarget.value);
    }
    const handleZipChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setZipCode(event.currentTarget.value);
    }
    
    const handleSubmit = (event: React.ChangeEvent <HTMLButtonElement>) => {
      event.preventDefault();
      // Perform search functionality here
      console.log(eventTerm);
      console.log(zipCode);
    }
    return (
      <main>
        <div className = "max-w-7xl mx-5 px-5 sm:px-6 lg:px-8 my-auto py-9 mt-20 text-center">
          <h1 …