自定义 React-Bootstrap 弹出窗口

Question

我想创建一个基于 Bootstrap 弹出框的自定义 React 弹出框，只是使用我自己的设计，也许还有更多道具。

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

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 和 overlay 属性设置为 <OverlayTrigger/> 元素，但它们属于 Popover。您可以通过让弹出窗口从触发元素继承道具来快速解决此问题，如下所示：

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：你不需要 return JSX 中的 JS（例如 { return this.props.children }）。你可以忽略它 ({ this.props.children })。

自定义 React-Bootstrap 弹出窗口

Custom React-Bootstrap Popover

reactjs

popover

react-bootstrap