我有这样的js代码:
let idCounter = 0;
export default class TestComponent extends Component {
constructor(props) {
super(props);
this.uniqueId = `TestComponent-${idCounter++}`;
}
render() {
return (<div id={this.uniqueId> Some content </div>);
}
}
我需要为每个呈现的元素都有唯一的 Id，所以我计算它们。
但是我有 Next.js 的 SSR。当页面在服务器上初始化时，由于服务器渲染，idCounter 会增加几次。
然后普通浏览器尝试呈现这个组件，从 0 开始 idCounter 并替换服务器端呈现的 id(例如“TestComponent-5”到“TestComponent-0”)。
我最终在控制台中出错:
"Warning: Prop
iddid not match. Server: "TestComponent-5" Client: "TestComponent-0" "
我不知道如何处理。
有任何想法吗？
最佳答案
我看到这个问题已经很老了，但无论如何，我一整天都在努力解决这个问题，直到找到解决方案。而且似乎没有很多关于它的信息。
有一个名为 react-uid 的库这是 SSR 友好的。您只需要将您的应用程序包装在 UIDReset 中，并在组件中使用 UIDConsumer 提供的唯一 ID
/pages/index.tsx:
import { UIDConsumer } from 'react-uid'
...
const Index = () => {
return (
<>
<UIDReset prefix="uid_">
<Layout>
<Head>
<title>Next.js App</title>
</Head>
<MyComponent />
</Layout>
</UIDReset>
</>
)
import { UIDConsumer } from 'react-uid'
...
return(
<UIDConsumer>
{(id) => (
(<div id={id}> Some content </div>);
)}
</UIDConsumer>
)
关于reactjs - 使用 react 和 SSR 增加元素 Id (next.js)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54868188/