Question

将React bootstrap Tabs的transition属性设置为false时，它将起作用。但是，当下面的示例将其设置为true时，它将引发以下异常。

<Tabs transition>
    <Tab title='Component 1'><Component1/></Tab>
    <Tab title='Component 2'><Component2/></Tab>
</Tabs>

index.js:1437 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: boolean.

Check the render method of `TabPane`.
    in TabPane (created by Tabs)
    in div (created by TabContent)
    in TabContent (created by Bootstrap(TabContent))
    in Bootstrap(TabContent) (created by Tabs)
    in TabContainer (created by Tabs)
    in Tabs (created by Uncontrolled(Tabs))
    in Uncontrolled(Tabs) (created by ForwardRef)
    in ForwardRef (at CTabs.js:67)
    in CTabs (created by Context.Consumer)
    in withRouter(CTabs) (at App.js:73)
    in Router (created by HashRouter)
    in HashRouter (at App.js:71)
    in header (at App.js:47)
    in div (at App.js:46)

我没有得到什么？

Answer 1

我认为这可能是一个错误。

从TabContainer.js的源代码中，注释说它允许true / false，但实际上它只接受false和PropTypes.elementType。

这是错误的原因。

 /**
     * Sets a default animation strategy for all children `<TabPane>`s. Use
     * `false` to disable, `true` to enable the default `<Fade>` animation or
     * a react-transition-group v2 `<Transition/>` component.
     *
     * @type {{Transition | false}}
     * @default {Fade}
     */
    transition: PropTypes.oneOfType([
      PropTypes.oneOf([false]),
      PropTypes.elementType,
    ]),

根据TabPane.js的源代码：

 const shouldTransition =
    props.transition !== false && rest.transition !== false;

  let key = makeEventKey(props.eventKey);

  return {
    ...props,
    active:
      props.active == null && key != null
        ? makeEventKey(activeKey) === key
        : props.active,
    id: getControlledId(props.eventKey),
    'aria-labelledby': getControllerId(props.eventKey),
    transition:
      shouldTransition && (props.transition || rest.transition || Fade),
    mountOnEnter:
      props.mountOnEnter != null ? props.mountOnEnter : rest.mountOnEnter,
    unmountOnExit:
      props.unmountOnExit != null ? props.unmountOnExit : rest.unmountOnExit,
  };
}

如果props.transition不为假，则shouldTransition为真。

因此，如果过渡是动态属性，则可以这样做以防止发生错误：


function App() {
  const transition = true;
  return (
   <Tabs transition={transition? null: false>
    <Tab title='Component 1'><Component1/></Tab>
    <Tab title='Component 2'><Component2/></Tab>
</Tabs>
  );
}

null是有效的PropTypes.elementType，它可以防止您收到错误消息
null !== false，因此shouldTransition变为true，它将返回默认的过渡道具。

Answer 2

我所做的对我有用的是......

import Fade from "react-bootstrap";

在您的代码中使用：<Tabs transition={Fade}>

transition 道具采用类似于 Fade 的 TransitionType，但它也接受 {false} 但NOT {true} >

我希望这会有所帮助。

React Bootstrap Tabs组件的过渡道具不起作用

2 个答案: