自定义 React-Bootstrap 弹出框答案

【问题标题】：Custom React-Bootstrap Popover自定义 React-Bootstrap 弹出框
【发布时间】：2016-10-16 05:28:36
【问题描述】：

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

我创建了一个名为 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>
    );
  }
}

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

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

【问题讨论】：

标签： reactjs popover react-bootstrap

【解决方案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：你不需要在 JSX 中返回 JS（例如{ return this.props.children }）。你可以忽略它 ({ this.props.children })。

【讨论】：

{...this.props} 正是我所需要的