Как в реактивном ремне передать параметры в Jumbotron от вызывающего компонента?

Question

Я думаю, что мне нужно использовать параметр tag для выделения реквизитов Jumbotron, но я не понимаю синтаксис, приведенный на странице компонентов реактивной ленты.

    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, чтобы изменить его высоту и динамически изменить фоновое изображение из вызывающего компонента. У кого-нибудь есть ссылка, которая поможет мне разобраться в этом? Если этот фрагмент кода не будет оценен по достоинству.

Заранее спасибо.

Answer 1

В конечном коде требовалась функция require (), чтобы обеспечить правильный указатель на фоновое изображение jumbotron. Требование не может быть в самом компоненте, потому что передача реквизитов в требование на уровне компонента выдает ошибку веб-пакета. Вместо этого require () должен был быть в вызывающем компоненте, поскольку аргумент должен быть чистой строкой. Окончательный код для компонента и вызывающего элемента выглядит следующим образом.

Нажмите здесь, чтобы показать полный реактивный компонент Jumbotron с подпорками

Нажмите здесь, чтобы увидеть конфигурацию вызывающего элемента

Answer 2

Вы можете просто передать style в ваш <Jumbotron> как обычно. Например:

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

Здесь есть пример .