如何在 reactstrap 工具提示中插入换行符？

Question

我的项目有一个可重用的工具提示组件，它利用reactstrap tooltip 来显示工具提示。用法如下图

import { UncontrolledTooltip } from 'reactstrap';

const Tooltip = ({
  target,
  title,
  trigger,
  position,
  delay,
  size,
  boundariesElement,
}) => {
  return (
    <div className={TooltipStyles.tooltip}>
      {title.length && target && (
        <UncontrolledTooltip
          cssModule={TooltipStyles}
          placement={position}
          target={target}
          trigger={trigger}
          delay={delay}
          defaultOpen={false}
          popperClassName={TooltipStyles.tooltipFade}
          innerClassName={classNames({
            [TooltipStyles.textSizeSmall]: size === 'small',
            [TooltipStyles.textSizeDefault]: size === 'default',
            [TooltipStyles.textSizeLarge]: size === 'large',
          })}
          boundariesElement={boundariesElement}
        >
          {title}
        </UncontrolledTooltip>
      )}
    </div>
  );
}; 

我想创建一个多行工具提示来显示项目列表。基本上，我希望 title 道具呈现多行字符串。有人可以指导我如何做到这一点吗？

我尝试在 title 属性中发送 HTML，但它不起作用。

Answer 1

以html形式发送标题，添加<br />标签。

以下代码以 2 行显示工具提示

<p>Somewhere in here is a <span style={{textDecoration: 'underline', color:'blue'}} href='#' id='UncontrolledTooltipExample'>tooltip</span>.</p>
      <UncontrolledTooltip placement='right' target='UncontrolledTooltipExample'>
        Hello <br />world!
      </UncontrolledTooltip>
      </div>

我尝试在 title 属性中发送 HTML，但它不起作用。 :(

您需要将其作为 JSX 发送，而不是作为 html 字符串发送

title='Hello<br />World' 不起作用

title={<>Hello<br />World</>} 应该可以工作

在您的示例中使用下面的代码并查看它的工作原理

import React from 'react';
import Tooltip from '@bit/reactstrap.reactstrap.tooltip';

 class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      tooltipOpen: false
    };
  }

  toggle() {
    this.setState({
      tooltipOpen: !this.state.tooltipOpen
    });
  }

  render() {
    return (
      <div>
        <link
          rel='stylesheet'
          href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'
        />
        <p>Somewhere in here is a <span style={{textDecoration: 'underline', color:'blue'}} href='#' id='TooltipExample'>tooltip</span>.</p>
        <Tooltip placement='right' isOpen={this.state.tooltipOpen} target='TooltipExample' toggle={this.toggle}>
          {this.props.title}
        </Tooltip>
      </div>
    );
  }
}

export default <Example title={<>Line one<br />Line 2<br />Line3</>} />