ES6構文を使用して、反応ブートストラップボタンのタイトルとしてhtml要素を使用しますか？

Question

React BootstrapとES6構文を使用してボタンを実装していますが、タイトルがメディアクエリに反応するようにしたいと思っています...ウィンドウが小さすぎる場合は、 'amazing'という単語をボタンから隠す必要がありますtitle "この素晴らしい製品を使用する"。私はCSS側（.optionalSubstring {display: none;}）を書いても問題ありませんが、文字列ではなくhtml要素を受け取るためにボタンのタイトル属性を取得するにはどうすればよいですか？

それがドロップダウンボタンをレンダリングして、表題「Use this <span className="optionalSubstring">amazing </span>Product」

そして、申し訳ありませんで、文字通り、動作しません（つまり、単に単一引用符で所望のタイトルをラップ）が、それはCSSのソリューションであることがあり、次のJSのものではありません。あなたがあなたの代わりに、文字列のJSX要素に渡すことができることを意味し、ソースhttps://github.com/react-bootstrap/react-bootstrap/blob/master/src/DropdownButton.js#L25

から見ることができるように彼らは、コンポーネント内{title}と空想何もしていない

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

。

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