使用反应选项卡时出现'未知道具'错误

Question

在我的应用程序中尝试实施react-tab-panel时出现错误。我按照安装说明无济于事。

这是正在产生错误的代码：

import React from 'react'; 
import TabPanel from 'react-tab-panel' 

const tabStyle = (props) => { 
    const baseStyle = { 
    padding: 10 
    } 

    return Object.assign(
    baseStyle, 
    props.active? 
     { color: 'red' }: 
     { background: 'gray' } 
) 
} 

const ExperimentDetail = ({ tabStyle }) => (
    <div className="experiment-detail"> 
    <TabPanel 
     tabAlign="center" 
     tabStyle={tabStyle} 
    > 
     <div tabTitle="first tab"> first </div> 
     <div tabTitle="second tab"> second </div> 
     <div tabTitle="third tab"> third </div> 
    </TabPanel> 
    </div> 
); 

export default ExperimentDetail; 

的输出被显示为是这样，这是接近正确的，但有轻微的错误。

在此先感谢您的帮助！

Answer 1

原因是，您使用的是TabStyleactive道具，但你是不是从ExperimentDetail成分进入。此外，还有一件事你需要改变，你需要使用TabStyle名称而不是tabStyle，因为每个react组件必须以大写字母开头。 而主要点是TabStyle是react组件，它不会返回一个对象，它会返回一个html部分，所以你不能使用它的样式。

使用它以这种方式：

如果你想使一个普通的功能，将return style对象，然后将它以这种方式写，创建一个单独的文件abc.js，把那function在该文件中，像这样的：

export function tabStyle(active){ 
    const baseStyle = { 
    padding: 10 
    } 

    return Object.assign(
    baseStyle, 
    props.active? 
     { color: 'red' }: 
     { background: 'gray' } 
) 
} 

Import这function在组件：

import {tabStyle} from './abc /*path to this file*/'; 

然后以这种方式使用它：

const ExperimentDetail =() => (
    <div className="experiment-detail"> 
    <TabPanel 
     tabAlign="center" 
     tabStyle={tabStyle(true)} 
    > 
     <div tabTitle="first tab"> first </div> 
     <div tabTitle="second tab"> second </div> 
     <div tabTitle="third tab"> third </div> 
    </TabPanel> 
    </div> 
); 

export default ExperimentDetail; 

检查工作jsfiddle例如：https://jsfiddle.net/ghoLrkjj/