javascript - render link tag in react object - Stack Overflow

admin管理员组

文章数量:1320612

I am mapping through my object data in const.js that contains a react-router <Link> within the object but when viewed in the browser it doesn't output it as a react link, instead it outputs it as <link to="/"> instead of an <a href="">.

How can I output my object data and correctly display the <Link> ?

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

I am mapping through my object data in const.js that contains a react-router <Link> within the object but when viewed in the browser it doesn't output it as a react link, instead it outputs it as <link to="/"> instead of an <a href="">.

How can I output my object data and correctly display the <Link> ?

https://www.webpackbin./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

• javascript
• reactjs
• react-router

Share Improve this question Follow asked May 15, 2017 at 8:41 tom harrisontom harrison 3,4331111 gold badges4747 silver badges7272 bronze badges 1

• dangerouslySetInnerHTML expects a JS object with __html property which should be valid HTML markup. Instead you are providing <Link> there and expecting it to render that ponent's html. React won't process <Link> there.dangerouslySetInnerHTML as name suggests should be avoided – Shubham Khatri Commented May 15, 2017 at 9:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Always try not to use dangerouslySetInnerHTML since it is more like wild innerHTML setting. React does not check for its own validations for this method.Setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

Instead, try modifying your code like given below.

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

Also for your 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;

Since Link is a ponent of react-router-dom You have to wrap your ponent with the Router ponent

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="/" ponent={Hello}/>     
  </Router>
)


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

I have a working example of the above item in https://www.webpackbin./bins/-KkAz4y3H_za5ZtmeNHS

Please ment if you need more explanations.

本文标签： javascriptrender link tag in react objectStack Overflow