Question

我想创建一个基于Bootstrap Popover的自定义反应弹出窗口，只需要我自己的设计和更多道具。

我创建了一个名为MyTooltip的新反应组件：

import React, {Component} from 'react';
import { Popover } from 'react-bootstrap';

export default class MyPopover extends Component{
  constructor(props){
    super(props);
  }

  render() {
    return (
        <Popover id="popover-trigger-focus" title={this.props.title}>
           { return this.props.children }
        </Popover>
    );
  }
}

在我的主要组件中，我试图创建一个触发器：

export default class MyMainComponent extends Component{

  render() {

    const popoverFocus = (
        <MyPopover id="tooltip-trigger-focus"  title="My Title">
          my text <b>my bold text</b> my text
        </MyPopover >
    );

    return (
      <div >

          <OverlayTrigger trigger="focus" placement="bottom" overlay={popoverFocus}>
            <Button>Focus</Button>
          </OverlayTrigger>

      </div>
    );
  }
}

但它不起作用。该按钮确实隐藏并显示带有正确文本的弹出窗口，但是popover忽略了“placement”属性，并且它没有淡入淡出动画。

任何帮助都会有用......

Answer 1

您已将placement和overlay道具设为<OverlayTrigger/>元素，但这些属于Popover。您可以通过让popover从触发器元素继承props来快速解决这个问题：

render() {
  return (
    <Popover id="popover-trigger-focus" title={this.props.title} {...this.props}>
        { this.props.children }
    </Popover>
  );
}

Here's your example with {...this.props}

PS：你不需要在JSX中返回JS（例如{ return this.props.children }）。您可以将其保留（{ this.props.children }）。

自定义React-Bootstrap Popover

1 个答案: