使用react-tab-panel

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

原因是，您在active中使用TabStyle道具，但您没有从ExperimentDetail组件传入。您需要更改的另一件事是，您需要使用TabStyle名称而不是tabStyle，因为每个react组件必须以大写字母开头。 要点是TabStyle是一个react组件，它不会返回一个对象，它会返回一个html部分，因此您无法使用它来设置样式

以这种方式使用它：

如果你想创建一个将return样式对象的泛型函数，然后以这种方式编写它，创建一个单独的文件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/