主页 / 问题 / 1208543
Accepted
Сергей Комыза
Asked:2021-11-23 17:11:17 +0800 CST2021-11-23 17:11:17 +0800 CST

行 js 中的 html 标记

  • 772

任何人都可以建议吗？使用创建反应应用程序。有这样一个组件-

import React from 'react'
import './Cases.sass'
import {CaseItem} from './CaseItem'
import case_1 from '../img/Cases/case-1.jpg'

class Cases extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            cases: [
                { caseImg: case_1, caseName: 'mysite.ru', caseSpecial: 'Оклейка автомобилей пленкой', caseText: 'Целевая аудитория: бизнес с автопарком, который необходимо забрендировать. Проблема – много трафика на сайте от частников, мало целевой аудитории. Результат: 2 месяца.' }
            ]
        }
    }

    render() {
        let cases = this.state.cases;
        return (
            <section className="cases">
                <div className="container">
                    <div className="row">
                        {
                            cases.map((item, i) => {
                                return(
                                    <div className="col-lg-4 col-md-12">
                                        <CaseItem img={item.caseImg} name={item.caseName} special={item.caseSpecial} text={item.caseText} key={i} />
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </section>
        )
    }
}

export default Cases

是否可以以某种方式在该行中注册 - caseText，html 标记？就像是 -

" "+<teg>+" Целевая аудитория: "+<teg/>+" бизнес с автопарком..."

但这不起作用。

javascript

1 个回答

  1. Best Answer

    在 CaseItem 组件中：<tag>{this.props.text}</tag>

    您可以在将返回 return jsx 的 Cases 中编写一个函数

      function template(string) {
      return (<i>{string}</i>)
  }

    （为了清楚起见，我标记了）

    好吧，然后在 props 中传递这个函数：

    <CaseItem template={template} />

    好吧，或者传递执行结果：

    <CaseItem text={template(item.caseText)} />
    • 1

相关问题