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

嘿，我来帮你搞清楚怎么给reactstrap的Jumbotron组件传递tag属性，以及理解它的用法～

首先看你贴的propTypes定义：

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

这里的tag属性作用是替换Jumbotron默认的根元素标签（默认是<div>），它接受两种类型的值：字符串（HTML原生标签名）或者函数（自定义React组件）。

1. 传递字符串类型的tag（替换为原生HTML标签） #

比如你想把Jumbotron的根元素改成<section>，直接把tag作为props传入即可：

return (
  <div>
    <Container>
      <Jumbotron tag="section">
        <h1 className="display-3">{this.props.title}</h1>
        {/* 这里可以继续添加Jumbotron里的其他内容，比如副标题、按钮等 */}
      </Jumbotron>
    </Container>
  </div>
);

2. 传递函数类型的tag（替换为自定义组件） #

如果你想使用自己的自定义组件作为Jumbotron的根元素，先定义好你的组件，再把它传给tag：

// 先定义一个自定义组件
const CustomJumbotronRoot = ({ children, ...props }) => {
  // 这里可以自定义组件的逻辑或样式
  return <article className="custom-jumbotron-root" {...props}>{children}</article>;
};

// 然后在Jumbotron中使用
return (
  <div>
    <Container>
      <Jumbotron tag={CustomJumbotronRoot}>
        <h1 className="display-3">{this.props.title}</h1>
      </Jumbotron>
    </Container>
  </div>
);

同时传递多个props #

你也可以把tag和其他可选属性（比如fluid、className）一起传递：

<Jumbotron tag="section" fluid className="bg-light text-dark">
  <h1 className="display-3">{this.props.title}</h1>
</Jumbotron>

这样就能轻松实现给Jumbotron传递tag以及其他props的功能啦～

内容的提问来源于stack exchange，提问作者David Poundall