0

Есть компонент:

    import React from 'react'
    import PropTypes from 'prop-types'

    const Todo = ({ onClick, completed, text }) => (
      <li className="ui-state-default">
        {text}

        <span className="todo-item fa fa-square-o" aria-hidden="true" title="Toggle" onClick={onClick}
        style={{ content: completed ? '"\f046"' : '"\f096"' }}></span>

      </li>
    )

    Todo.propTypes = {
      onClick: PropTypes.func.isRequired,
      completed: PropTypes.bool.isRequired,
      text: PropTypes.string.isRequired
    }

    export default Todo

Он должен при клике на квадратик заменить его на чекед-квадратик и наоборот. Что нужно изменить здесь style={{ content: completed ? '"\f046"' : '"\f096"' }}, чтобы менялась картинка? Если я использую просто графические иконки .png и вместо contentbackground, то всё работает.

1
  • Уточняю: применить content можно только к псевдоэлементу content::before. Но символы :: вызывают синтаксическую ошибку. Как записать строку на TypeScript, если это вообще возможно? Commented 18 нояб. 2017 в 21:05

1 ответ 1

0

Конкретно по Вашему комментарию – используйте кавычки вокруг ::before:

{ '::before': { content: completed ? '"\f046"' : '"\f096"' }}

А почему бы не изменять содержимое самого span?

Либо добавлять checked в className, а в css уже использовать что-то типа

todo-item.checked::before {
    content: "\f046"
}

todo-item::before {
    content: "\f096"
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.