1

у меня есть строка, которую я импортирую! текста много, и возможно будет меняться, поэтому беру ее целиком! дальше я импортирую эту строку в компоненту, но некоторые слова хочу превратить в ссылки!

export default testStr = 
`
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor ac lacus ut ultrices. Cras quis enim eget elit venenatis fermentum non sed sem. Etiam malesuada non nunc ac posuere. Cras aliquet, libero eget elementum tincidunt, libero ligula congue sapien, faucibus ornare metus ante in nisi. Praesent vel tortor at dui cursus tincidunt. Etiam dictum placerat luctus. Phasellus lorem odio, ultrices sed sapien vel, porta interdum arcu. Nam cursus, mi in volutpat egestas, ipsum turpis blandit dolor, in efficitur nisl velit a erat. Quisque quis ex sit amet augue rutrum pellentesque vel sed sapien. Etiam dictum orci porta, fringilla libero vitae, mollis ipsum. Suspendisse semper risus lectus, vitae lobortis ligula viverra id. Vestibulum cursus dolor id pharetra scelerisque. Nullam sodales erat nunc. In velit neque, aliquam vel lacus et, consectetur ornare neque. Fusce vel mattis magna.Integer sit amet eros id justo ultrices ornare vitae at risus. In sed fermentum diam. Donec euismod velit ut posuere malesuada. Sed laoreet finibus ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce iaculis volutpat posuere. Maecenas feugiat dolor at magna imperdiet sagittis. Cras vel diam in magna gravida tempus a vitae neque. Fusce et enim convallis, volutpat nunc eu, laoreet tellus. Nulla magna ligula, malesuada ac varius ut, molestie volutpat mauris. Praesent varius tempor tortor nec varius. Donec rutrum efficitur porttitor. Cras sit amet tellus dui. Donec ac egestas est. Nullam ultrices tristique justo nec finibus. Sed et cursus velit. 
`

В компоненте

import testStr  from....

const MyLink = ({children}) => {
    const handlePress = useCallback( async () => {
        await Linking.openURL(children);
    });
    return (
        <Text title={children} style={styles.text} onPress={() => handlePress()}>{children}</Text>
    )
}
render() {
    return (
        <Text style={styles.text}>
             { testStr.replace('fermentum',`${<MyLink >https://test.com</MyLink>}`)}
        </Text>
    )
}

И testStr.replace('fermentum',${<MyLink >https://test.com</MyLink>}) это не работает! Вместо преобразовании в ссылку, выводит [object object]! Уже как только не пробовал! Подскажите кто в тебе, как мне заменить слово на ссылку?!

1 ответ 1

2

Можно разбить строку по словам, которые вы хотите заменить, а потом между всеми элементами массива вставить нужный вам элемент.

const testStr = "just lorem a string lorem ipsum";

const result = testStr.split("lorem").map((e, i) => [e, {yourelement: i}]).flat().slice(0, -1);

console.log(result);

А сам массив уже вставить в элементе.

const { useState } = React;

const testStr =
  `
lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor ac lacus ut ultrices. Cras quis enim eget elit venenatis fermentum non sed sem. Etiam malesuada non nunc ac posuere. Cras aliquet, libero eget elementum tincidunt, libero ligula congue sapien, faucibus ornare metus ante in nisi. Praesent vel tortor at dui cursus tincidunt. Etiam dictum placerat luctus. Phasellus lorem odio, ultrices sed sapien vel, porta interdum arcu. Nam cursus, mi in volutpat egestas, ipsum turpis blandit dolor, in efficitur nisl velit a erat. Quisque quis ex sit amet augue rutrum pellentesque vel sed sapien. Etiam dictum orci porta, fringilla libero vitae, mollis ipsum. Suspendisse semper risus lectus, vitae lobortis ligula viverra id. Vestibulum cursus dolor id pharetra scelerisque. Nullam sodales erat nunc. In velit neque, aliquam vel lacus et, consectetur ornare neque. Fusce vel mattis magna.Integer sit amet eros id justo ultrices ornare vitae at risus. In sed fermentum diam. Donec euismod velit ut posuere malesuada. Sed laoreet finibus ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce iaculis volutpat posuere. Maecenas feugiat dolor at magna imperdiet sagittis. Cras vel diam in magna gravida tempus a vitae neque. Fusce et enim convallis, volutpat nunc eu, laoreet tellus. Nulla magna ligula, malesuada ac varius ut, molestie volutpat mauris. Praesent varius tempor tortor nec varius. Donec rutrum efficitur porttitor. Cras sit amet tellus dui. Donec ac egestas est. Nullam ultrices tristique justo nec finibus. Sed et cursus velit. 
`

function MyLink() {
  return <a href="#mylink">MYLINK</a>
}

function MainPage() {
  const [link, setLink] = React.useState(testStr.split("lorem").map((e, i) => [e, <MyLink key={i}/>]).flat().slice(0, -1));

  return (<p> {link} </p>);
}

ReactDOM.render( <MainPage/> , document.getElementById('app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

3
  • я в принципе пробовал схожим образом: 1) разбить в массив 2) в конце каждого элемента вставить свою ссылку 3) соединить массив в строку... но была аналогичная ошибка! Твой пример работает, спасибо) Хотелось бы конечно более простой и быстрый способ, но видно придется делать так))
    – Inflexible
    14 мая 2020 в 15:55
  • @Inflexible, в строку не получится т.к <MyLink/> это обьект, а при преобразовании его к строке вы получаете [object object]. 14 мая 2020 в 16:09
  • спасибо за обьяснение!) бывает нужно решение, а времени долго искать и пробовать нет))
    – Inflexible
    14 мая 2020 в 17:00

Ваш ответ

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

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