前端之家

  1. 首页
  2. 问答

如何解决这个问题“警告：失败的道具类型：道具`title`在`Tab`中被标记为必需，但其值为`undefined`。”

• 问答

我刚刚开始探索 React，我正在尝试在我的 React 项目中添加选项卡，但这不起作用，它不显示任何内容

控制台中的警告以警告消息开始：

如何解决这个问题“警告：失败的道具类型：道具`title`在`Tab`中被标记为必需，但其值为`undefined`。”

我不明白为什么它会显示此警告消息。有人可以帮我解决这个问题吗？

Tabs.js

import React from 'react';


class Tabs extends React.Component {
    constructor (props) {
      super (props)
      this.state = {
        selectedTab: 0
      }
    }
    
    selectTab = (index) => {
      this.setState({ selectedTab : index })
    }
    
    render () {
      return (
        <div>
          <div classname="tabs">
            <ul>
              {
                this.props.children.map((child,index) => {
                  let style = index == this.state.selectedTab ? 'is-active': ''
                  return (
                    <li classname={style} key={index} onClick={() => this.selectTab(index)}>
                      <a>
                        {child.props.label}
                      </a>
                    </li>
                  )
                })
              }
            </ul>
          </div>
          <div classname="tab-content">
            { this.props.children[this.state.selectedTab] }
          </div>
        </div>
      )
    }
  }
    class Tab extends React.Component {
    render () {
      return (
        <div>{ this.props.children }</div>
      )
    }
  }

  export default Tabs;

TabsContent.js

import React,{ Component } from 'react'
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

export class TabsContent extends Component {
    render() {
        return (
            <div>
                   <section classname="section">
                        <div classname="app container">
                            
                            <h2 classname="title">React Tabs</h2>
                
                            <Tabs>
                            <Tab label="Pictures">Pictures content</Tab>
                            <Tab label="Music">Music content</Tab>
                            <Tab label="Video">Video content</Tab>
                            <Tab label="Document">Document content</Tab>
                            </Tabs>
                
                        </div>
        </section>
            </div>
        )
    }
}

export default TabsContent;
hirxn45624 回答：如何解决这个问题“警告：失败的道具类型：道具`title`在`Tab`中被标记为必需，但其值为`undefined`。”

似乎来自 Bootstrap Tab 组件。您需要传递 title 道具，因为它在 react-bootstrap docs 中被列为必需。

,

返回后立即添加片段。欲了解更多信息https://reactjs.org/docs/fragments.html

           import React,{ Component } from 'react'
           import Tabs from 'react-bootstrap/Tabs';
           import Tab from 'react-bootstrap/Tab';
    
           export class TabsContent extends Component {
                render() {
             return (       
                     <>
                       <div>
                       <section className="section">
                            <div className="app container">
                                
                                <h2 className="title">React Tabs</h2>
                    
                                <Tabs>
                                <Tab label="Pictures">Pictures content</Tab>
                                <Tab label="Music">Music content</Tab>
                                <Tab label="Video">Video content</Tab>
                                <Tab label="Document">Document content</Tab>
                                </Tabs>
                    
                               </div>
                          </section>
                      </div>   
                    </>
              )
           }
             }
    
              export default TabsContent;
    ```
javascriptjsxreactjsrxjs
本文链接：https://www.f2er.com/1319.html

大家都在问