html Element als react-Bootstrap-Taste Titel, mit ES6-Syntax?

Question

Ich implementiere eine Schaltfläche mit React Bootstrap und ES6-Syntax, aber ich möchte den Titel auf Media-Abfragen reagieren lassen ... Wenn das Fenster zu klein ist, sollte das Wort "erstaunlich" von der Schaltfläche ausgeblendet werden Titel "Verwenden Sie dieses erstaunliche Produkt". Ich bin in Ordnung mit dem Schreiben der CSS-Seite (.optionalSubstring {display: none;}), aber wie bekomme ich das Titelattribut der Schaltfläche, um ein HTML-Element anstelle einer Zeichenfolge zu erhalten?

Die folgende (dh einfach den gewünschten Titel in Apostrophe Einwickeln) nicht funktioniert, da es die Drop-Down-Taste wahrsten Sinne des Wortes mit dem Titel „Use this <span className="optionalSubstring">amazing </span>Product“

Und sorry macht, aber es hat eine CSS-Lösung sein , kein 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

Sie sind nichts Besonderes mit {title} in der Komponente zu tun, wie Sie von der Quelle https://github.com/react-bootstrap/react-bootstrap/blob/master/src/DropdownButton.js#L25

Bedeutung Sie in einem jsx Elemente passieren können anstelle einer Zeichenfolge sehen.

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