Question

我在const.js中的对象数据中映射，其中包含对象中的react-router <Link>，但在浏览器中查看时，它不会将其作为反应链接输出，而是它将其输出为<link to="/">而不是<a href="">。

如何输出对象数据并正确显示<Link>？

https://www.webpackbin.com/bins/-KkA6XGxeVPedj8apbOA

Hello.js

import React, { Component } from 'react'
import frequentQuestions from './const'
import Freq from './freqQues'

export default class Hello extends Component {

  render() {

    return (
      <div>
      {/* Frequently asked Questions */}
       {frequentQuestions.map(fq =>
        <div key={fq.id}>
         <Freq key={fq.id} question={fq.question} answer={fq.answer} />
        </div>
      )}
  </div>
  )
 }
}

freqQues.js

import React from 'react'
import { Link } from 'react-router'
import './styles.css'

export default class Freq extends React.Component {

  render() {
    return(
    <div >
    <div dangerouslySetInnerHTML={ {__html: this.props.answer } } />
  </div>
  )
 }
}

const.js

const frequentQuestions = [
  { id: 1, 
    question: 'Question1',
    answer: '<Link to="/contact">answer1</Link>' 
  },
  { id: 2,
   question: 'question2',
   answer: 'answer2, bla bla bla <br /><Link to="/blabla"> bla bla </Link> 
   <br />bla bla'
  },
  { id: 3,
    question: 'question3', 
    answer: 'answer3' 
  },
  { id: 4,
    question: 'question4', 
    answer: 'answer4' 
  },
  { id: 5, 
    question: 'question5', 
    answer: 'answer5' 
  },
]

export default frequentQuestions

Answer 1

总是尽量不要使用dangerouslySetInnerHTML，因为它更像是野生的innerHTML设置。 React不检查它自己对此方法的验证。从代码中设置HTML是有风险的，因为它很容易无意中将您的用户暴露给跨站点脚本（XSS）攻击。

相反，请尝试修改您的代码，如下所示。

<强> const.js

    const frequentQuestions = [
      { id: 1, 
        question: 'Question1',
        answer: {
            to: '/contact',
            linkText: 'answer1'
        }
      },
      { id: 2,
       question: 'question2',
       answer: {
         to: '/blah',
         linkText: 'blahblah'
        }
      }

    ]
export default frequentQuestions

还适用于 freqQues.js

// freQues.js    
import React from 'react'
import { Link } from 'react-router-dom'
import './styles.css'

const Freq = ({question, answer})=>(
  <div >
    {question} 
    <Link to={answer.to}>{answer.linkText}</Link>
  </div>
)

export default Freq;

由于Link是react-router-dom的组件，因此必须使用路由器组件包装组件

<强> Main.js

//Main.js
import React from 'react'
import {render} from 'react-dom'
import Hello from './Hello'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const RootComp = () => (
  <Router>
    <Route exact path="/" component={Hello}/>     
  </Router>
)


render(<RootComp />, document.querySelector('#app'));

我在https://www.webpackbin.com/bins/-KkAz4y3H_za5ZtmeNHS

中有上述项目的工作示例

如果您需要更多解释，请发表评论。

在反应对象中渲染链接标记

1 个答案: