@GNG999

Как правильно сделать перенос текста в react pdf?

Делаю таблицу в react pdf .
Сделал компонент таблицы
const Table = ({ headers, dataContent, contentKeys }) => {
  return <View style={{ display: 'flex', flexDirection: 'column', width: '100%', backgroundColor: 'green' }}>
  { headers.length > 0 ? <View style={{ display: 'flex', flexDirection: 'row', width: '100%', backgroundColor: 'green' }}>
      {headers.map(hdr =>
        <View style={{ width: '330px', backgroundColor: 'pink' }}>
          <Text>{hdr}</Text>
        </View>)}
    </View> : null}
    {dataContent && dataContent.length > 0 ? dataContent.map((dataObj,index)=><View style={{ display: 'flex', flexDirection: 'row', width: '100%', backgroundColor: 'green' }} wrap={false}>
    <View style={{ width: '330px', backgroundColor: 'pink' }}>
          <Text>{index + 1}</Text>
        </View>
    {contentKeys.length > 0 ? contentKeys.map((val)=><View style={{ width: '330px',display:'flex', flexWrap:'wrap',backgroundColor: 'pink' }}>
          <Text>
         {dataObj[val]}
          </Text>
        </View>) : null}
    </View>) : null}
  </View>
}


Проблемное место в этих строках
{contentKeys.length > 0 ? contentKeys.map((val)=><View style={{ width: '330px',display:'flex', flexWrap:'wrap',backgroundColor: 'pink' }}>
          <Text>
         {dataObj[val]}
          </Text>
        </View>) : null}


Когда передаешь динамические данные
<Table headers={['№','Вид обследования','Место','Цель проведения']} dataContent={checkupPlans} contentKeys={['kind','place','target']}/>

Текст нормально не переносится, выходит за границы таблицы 63822eafe2352218185145.png

Как это исправить ?
  • Вопрос задан
  • 46 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы