标签: react-tabs

我正在尝试在 next.js 中的下一个选项卡，但每次使用它时它都会显示一个控制台警告链接Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0"，我知道它不会影响我的应用程序，但它太烦人了。如何解决这个警告

<Tabs>
  <div className="tab-controler ml-sm-auto">
    <TabList className="tab-lists list-inline d-flex  flex-wrap nav mb-3" style={{ background: '#F8F8F8' }}>
      <Tab className={`${CostCalculatorStyle.PEItem} tab-lists__item`}>Buy & Ship for me</Tab>
      <Tab className={`${CostCalculatorStyle.PEItem} tab-lists__item`}>Ship for me</Tab>
    </TabList>
  </div>
  <TabPanel key={"tabpanel_ship"}>
    <div className="row">
      <div className="col-lg-6">
        <ShipForMeForm handleFormValue={handleFormValue} handleProductValue={handleProducts} handleRef={handleRef} />
      </div>
      <div className="col-lg-6 align-self-center">
        <div className="costcalc-empty-thumb text-center">
          <Image
            src="/assets/topNavbarPages/costCalculator.svg"
            alt="Cost Calculator"
            width="469"
            height="288"
          />
        </div>
      </div>
    </div>
  </TabPanel>
  <TabPanel key={"tabpanel_buy_ship"}>
    <div className="row">
      <div className="col-lg-6">
        <ShipForMeForm handleFormValue={handleFormValue} handleProductValue={handleProducts} …

我是 React 新手，正在使用 React-table 库。但我需要将结果导出为 HTML。我已经创建了一个基本的 HTML 结构并想要添加该表，但是它返回 [object Object] 并且如果我 console.log 它的返回值记录为：

{$$typeof: Symbol(react.element), key: null, ref: null, props: {\xe2\x80\xa6}, type: \xc6\x92,\xc2\xa0\xe2\x80\xa6}\n

提前致谢

只是想得到一个反应标签工作的基本例子。样式似乎丢失了。下面的示例在代码沙箱中（查看“Hello.js”），但在通过 npm 将包安装到我的项目后，我看到了完全相同的行为。我错过了什么？谢谢！

https://codesandbox.io/s/jzql1q6819