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

Posted 2023-03-23

【中文标题】如何在 reactstrap 工具提示中插入换行符？

【英文标题】：How to insert newline in reactstrap tooltip?

【发布时间】：2021-06-08 04:31:11

【问题描述】：

我的项目有一个可重用的工具提示组件，它利用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，但它不起作用。

【参考方案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</> />

【讨论】：

如果我发送 jsx，工具提示不会显示 :( 尝试使用 title=<>Hello<br />World</> 但工具提示停止工作

@JakeCano 尝试将title.length 更改为title