自定义React-Bootstrap Popover

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>
    );
  }
}

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

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

Answer 1

你已经为元素设置了placement和overlayprop <OverlayTrigger/>,但那些属于Popover.您可以通过让popover从触发器元素继承props来快速解决此问题,如下所示:

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

这是你的例子{...this.props}.

PS:你不需要在JSX中返回JS(例如{ return this.props.children }).你可以把它留下来({ this.props.children }).