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

【问题标题】：How to fix this issue “Warning: Failed prop type: The prop `title` is marked as required in `Tab`, but its value is `undefined`.”如何解决此问题“警告：道具类型失败：道具`title`在`Tab`中标记为必需，但其值为`undefined`。”
【发布时间】：2021-08-01 16:31:33
【问题描述】：

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

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

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

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;

【问题讨论】：

你的错误中的痕迹说层次结构是 Navbar1 -> div -> body (???) -> header -> figure -> a - 你的代码中没有那个链'已经粘贴了。
@AKX 我刚刚得到了错误的图片，现在已经编辑了任务
你基本上只是重写了问题和“证据”......
@AKX 是的，我做到了

标签： javascript reactjs rxjs jsx

【解决方案1】：

似乎它来自 Bootstrap Tab 组件。您需要传递 title 属性，因为它在 react-bootstrap docs 中被称为 required。

【讨论】：

我按要求提到了 Tab.propTypes = { title: PropTypes.string.isRequired } 但还是一样的 msg warn
有两个 Tab 组件。一个是你做的，一个是你从 react-bootstrap 导入的。您的错误来自 react-bootstrap 组件。所以，你需要像这样将 title 属性传递给这个组件： Pictures content

【解决方案2】：

返回后立即添加片段。欲了解更多信息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;
    ```

【讨论】：