Article From:https://segmentfault.com/q/1010000011108683
Question:

How to convert the specific content of react returned to the string into red

import React from ‘react’;
import style from ‘./index.css’

class AboutUs extends React.Component{

render(){
    return(
        <div className={style.contentlist}>
            {
                this.props.data.map((v)=>{
                    return(
                        <div className={style.content}>
                            <div className={style.title}>
                                <span>{v.title}</span>
                            </div>
                            <ul className={style.list}>
                                {
                                    v.content.map((t)=>{
                                        return (
                                            <li className={style.item}>
        {this.red(t)}
                                                </li>
                                        )
                                    })
                                }
                            </ul>
                        </div>
                    )
                })
            }
        </div>
    )
}
red(t){
    if(this.props.redw){
        let newstr = t.replace(/Interest /ig, "< I style='color: red;'> $& < /i>";Newstr = React.createElement (newstr)Return < p> {newstr}< /p>}else {Return < p> {t}< /p>}}

}

export default AboutUs

Answer 0:

dangerouslySetInnerHTMLReact is an alternative to innerHTML in browser DOM. Typically, setting HTML from code is risky because it’s easy to inadvertently expose your user’s cross-site scripting (XSS) attacks. Therefore, you can set HTML directly from React, butYou must enter dangerouslySetInnerHTML and use the __html key to pass objects to remind yourself that this is dangerous. For example:

function createMarkup() {
return {__html: ‘First · Second’};
}

function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
https://facebook.github.io/re…

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *