html 元素作为 react-bootstrap 按钮标题，使用 ES6 语法？

Question

我正在使用 React Bootstrap 和 ES6 语法实现一个按钮，但我想让标题响应媒体查询...如果 window 太小，那么单词 'amazing' 应该从按钮标题 "Use this amazing Product" 中隐藏。我可以写 CSS 边 (.optionalSubstring {display: none;})，但是我怎样才能让按钮的 title 属性接收 html 元素而不是字符串？

以下内容（即简单地将所需标题用单引号括起来）不起作用，因为它会按字面意思呈现下拉按钮标题“Use this <span className="optionalSubstring">amazing </span>Product”

抱歉，它必须是 CSS 解决方案，而不是 JS 解决方案。

import {default as React, Component} from 'react';
import {Button, DropdownButton, MenuItem} from 'react-bootstrap';

export default class MyDropdown extends Component {

    onSelectOpen = (eventKey) => {
        //do something
    };

    render() {
        let myTitle = 'Use this <span className="optionalSubstring">amazing </span>Product';

        return (
            <div className="menuWrapper">
                <DropdownButton bsSize="small" dropup bsStyle="default4" title={myTitle} id="ShowInProductMenu">
                    <MenuItem eventKey="foo1" onSelect={this.onSelectOpen}>Foo One</MenuItem>
                    <MenuItem eventKey="foo2" onSelect={this.onSelectOpen}>Foo Two</MenuItem>
                    <MenuItem eventkey="foo3" onSelect={this.onSelectOpen}>Foo Three</MenuItem>
                </DropdownButton>
            </div>
        );
    }
}

Answer 1

正如您从源代码 https://github.com/react-bootstrap/react-bootstrap/blob/master/src/DropdownButton.js#L25

中看到的那样，他们在组件中没有对 {title} 做任何花哨的事情

这意味着您可以传入 jsx 元素而不是字符串。

let myTitle =
  <span>
    Use this <span className="optionalSubstring">amazing </span>Product
 </span>

html 元素作为 react-bootstrap 按钮标题，使用 ES6 语法？

html element as react-bootstrap button title, using ES6 syntax?

html

ecmascript-6

reactjs

react-bootstrap