使用反應選項卡時出現'未知道具'錯誤

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/