0

我想我需要使用 tag 参数来为 Jumbotron 分配道具,但我不明白 reactstrap 组件页面上给出的语法。

    Jumbotron.propTypes = {
    // Pass in a Component to override default element
    tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
    fluid: PropTypes.bool,
    className: PropTypes.string
    };

我的工作代码是

    return (
       <div>
       <Container>
       <Jumbotron >
          <h1 className="display-3">{this.props.title}</h1>

我正在尝试将一个道具传回给 Jumbotron 以更改它的高度,并从调用组件动态更改背景图像。有没有人有一个链接可以帮助我深入了解这个?如果未能提供代码片段,我们将不胜感激。

提前致谢。

4

2 回答 2

0

你可以像往常一样style进入你的。<Jumbotron>例如:

<Jumbotron style={{ backgroundColor: 'red', height: 200 }}>
  <h1 className="display-3">hey</h1>
</Jumbotron>

这里有一个例子。

于 2018-04-27T12:04:46.367 回答
0

最终代码需要一个 require() 来提供指向 jumbotron 背景图像的正确指针。require 不能在组件本身中,因为在组件级别将 props 传递给 require 会导致 webpack 错误。相反, require() 必须在调用组件中,因为参数必须是纯字符串。组件和调用元素的最终代码如下。

单击此处以显示带有道具的完整 reactstrap Jumbotron 组件

点击这里查看调用元素配置

于 2018-04-27T21:22:29.113 回答