Блог

Главная - Вопросы по программированию - добавление текста в конец метки и включение тега не работает должным образом

добавление текста в конец метки и включение тега не работает должным образом

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытаюсь сделать так, чтобы метка внутри моей круговой диаграммы отображалась в 2 строках, и это не работает:

 <PieChart
        data={[{
          title: 'One',
          value: 82,
          color: '#007DCD'
        }]}
        totalValue={100}
        lineWidth={20}
        label={({ data, dataIndex }) =>
        Math.round(data[dataIndex].percentage)   '% '   <br/>   'complete'
      }
        labelStyle={{
          fontSize: '12px',
          fontFamily: 'Lato'
        }}
      />

Комментарии:

1. не работает , что именно означает? Используя консоль разработчика, вы можете увидеть вставку <br> тега?

2. В консоли это выглядит так — 82% [object Object] завершено

Ответ №1:

React попытается защитить вас от XSS-атак или от случайной вставки непреднамеренных элементов DOM в выходные данные путем экранирования строк, таких как foo < bar to foo amp;< bar . Чтобы обойти это, попробуйте использовать Fragment :

 <PieChart
    data={[{
      title: 'One',
      value: 82,
      color: '#007DCD'
    }]}
    totalValue={100}
    lineWidth={20}
    label={({ data, dataIndex }) => (
      <React.Fragment>
        {Math.round(data[dataIndex].percentage)}% <br/>complete
      </React.Fragment>
    )}
    labelStyle={{
      fontSize: '12px',
      fontFamily: 'Lato'
    }}
  />