Как передать переменный с текстом и ссылкой на React элемент

Question

Если у меня есть Реагировать компонент, как это:

return (
    <p>{obj.text}</p> 
) 

Где я проходящий в закодированном значении, как это:

obj = { 
    text: 'This is an example string. I would like a [link here].' 
} 

Могу ли я использовать только dangerouslySetInnerHtml и передать его в HTML?

Хотя это может быть и не вредно в данном конкретном случае, я мог видеть возможность со временем, когда разработчик вводит переменную в obj.text, и внезапно пользователь сможет ввести вредоносный код.

Есть ли более аккуратное решение?

Answer 1

Ну, если вы хотите что-то установить как HTML, то опасноSetInnerHtml - это так. Если используемый вами HTML-код не является чем-то, что вы имеете полный контроль и что-то вроде пользовательского ввода, тогда вы всегда должны разбирать его в любом случае, чтобы убедиться, что он не злонамерен.

Если вы хотите создать гиперссылку, то другой возможностью является функция, которая строит элемент и возвращает это. Так, например:

obj = { 
    text: 'This is an example string.', 
    link: 'www.TastyPotatoes.com' 
} 

И ваша функция визуализации может быть что-то вроде этого:

buildLink() { 
    return(
     <p> 
     {obj.text}. <a href={obj.link}>This is a link</a> 
     </p> 
    ); 
} 

render() { 
    return (this.buildLink()); 
} 

Таким образом, вы не используете dangerouslySetInnerHtml. В конце, если вам нужно установить что-то как HTML напрямую, всегда сначала проанализируйте его, чтобы убедиться в его безопасности.

Answer 2

Если вы хотите создать компонент, специально предназначенный для этого случая использования, то предложенный @ Jayce444 правильный путь.

Но если вы хотите более общий подход, то вы можете выбрать библиотеку, такую ​​как React Linkyfy (https://github.com/tasti/react-linkify/).

Я использовал его в одном из своих проектов, и это просто отлично поработало для меня.

Вот простейшая форма компонента, который я использую.

import React, {PropTypes} from 'react'; 
import Linkify from 'react-linkify'; 

export default class TextWithLink extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     let text = this.props.text; 
     if(this.props.showLink) { 
     text = <Linkify properties={{target: '_blank', rel: "nofollow noopener"}}>{text}</Linkify> 
     } 
     return (<div>{text}</div>); 
    } 
}