在 reactstrap 中，如何从调用组件将参数传递给 Jumbotron？

Question

我想我需要使用标签参数来为 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 以更改其高度，并从调用组件动态更改背景图像。有没有人有 link 可以帮助我弄清楚这个问题的原因？如果没有代码片段，将不胜感激。

提前致谢。

Answer 1

您可以照常将 style 传递到您的 <Jumbotron> 中。例如：

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

有一个例子here。

Answer 2

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

Click here to show the complete reactstrap Jumbotron component with props

Click here to see the calling element configuration

在 reactstrap 中，如何从调用组件将参数传递给 Jumbotron？

In reactstrap how do I get parameters through to the Jumbotron from a calling component?

reactjs

reactstrap