html в качестве заголовка кнопки реакции-начальной загрузки с использованием синтаксиса ES6?

Я реализую кнопку с использованием синтаксиса React Bootstrap и ES6, но я бы хотел, чтобы заголовок реагировал на запросы мультимедиа ... если окно слишком маленькое, то слово «потрясающе» должно быть скрыто из заголовка кнопки » Воспользуйтесь этим удивительным продуктом ». Я нормально пишу сторону 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>
        );
    }
}

reactjs html react-bootstrap ecmascript-6
person pgblu    schedule 29.04.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Они не делают ничего особенного с {title} в компоненте, как видно из источника https://github.com/react-bootstrap/react-bootstrap/blob/master/src/DropdownButton.js#L25

Это означает, что вы можете передать элемент jsx вместо строки.

let myTitle =
  <span>
    Use this <span className="optionalSubstring">amazing </span>Product
 </span>
person azium    schedule 29.04.2016
comment
потрясающий! Мне нужно пересмотреть синтаксис JSX (снова) - person pgblu; 29.04.2016
comment
Определение машинописного текста дает ошибку, кажется, что ожидаемый заголовок - это только строка в соответствии с файлом определения машинописного текста, как мне это исправить? - person Hitendra; 27.06.2017