Javascript react对象中的渲染链接标记

我通过

const.js

中的对象数据进行映射，对象中包含一个react路由器

，但在浏览器中查看时，它不会将其作为react链接输出，而是将其作为

而不是

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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

import React，{Component}来自“React”
从“/const”导入常见问题
从“/freqQues”导入频率
导出默认类Hello扩展组件{
render（）{
返回(
{/*常见问题*/}
{frequentQuestions.map（fq=>
)}
)
}
}

frequeques.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

从“React”导入React
从“反应路由器”导入{Link}
导入“./styles.css”
导出默认类Freq.Component{
render（）{
返回(
)
}
}

const.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

const frequentQuestions=[
{id:1，
问题：‘问题1’，
回答：“回答1”
},
{id:2，
问题:"问题2",，
回答：'回答2，布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

bla bla'
},
{id:3，
问题:"问题3",，
回答：“回答3”
},
{id:4，
问题:"问题4",，
回答：“回答4”
},
{id:5，
问题:"问题5",，
回答：“回答5”
},
]
导出默认频繁问题
始终不要使用危险的LysetinerHTML，因为它更像是wild innerHTML设置。React不会检查此方法的自身验证。从代码设置HTML是有风险的，因为很容易在不经意间让用户遭受跨站点脚本（XSS）攻击

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

const.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

也适用于您的frequeques.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

//freQues.js
从“React”导入React
从“react router dom”导入{Link}
导入“./styles.css”
常数频率=（{问题，答案}）=>(
{问题}
{answer.linkText}
)
导出默认频率；

由于Link是react-router-dom的一个组件，所以您必须用路由器组件包装您的组件

Main.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

//Main.js
从“React”导入React
从'react dom'导入{render}
从“./Hello”导入Hello
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”
常量RootComp=（）=>(
)
render（，document.querySelector（'#app'）；

我有一个工作的例子，上面的项目中

如果需要更多解释，请发表评论。
始终不要使用危险的LysetinerHTML，因为它更像是wild innerHTML设置。React不会检查此方法的自身验证。从代码设置HTML是有风险的，因为很容易在不经意间让用户遭受跨站点脚本（XSS）攻击

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

const.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

也适用于您的frequeques.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

//freQues.js
从“React”导入React
从“react router dom”导入{Link}
导入“./styles.css”
常数频率=（{问题，答案}）=>(
{问题}
{answer.linkText}
)
导出默认频率；

由于Link是react-router-dom的一个组件，所以您必须用路由器组件包装您的组件

Main.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>
  )
 }
}

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 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

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

    ]
export default frequentQuestions

// 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;

//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'));

//Main.js
从“React”导入React
从'react dom'导入{render}
从“./Hello”导入Hello
进口{
BrowserRouter作为路由器，
路线,，
链接
}从“反应路由器dom”
常量RootComp=（）=>(
)
render（，document.querySelector（'#app'）；

我有一个工作的例子，上面的项目中

如果您需要更多解释，请发表评论。
危险的SetinenerHTML
要求JS对象具有
\uUHTML
属性，该属性应为有效的
html
标记。相反，您在那里提供
，并期望它呈现该组件的html。React不会在那里处理
。
应避免使用名称建议的
DangerouslySetinerHTML
，
DangerouslySetinerHTML
要求JS对象具有
\uU html
属性，该属性应为有效的
html
标记。相反，您在那里提供
，并期望它呈现该组件的html。React不会在那里处理
。
正如名字所示，应该避免危险的setinenerHTML
，这对于简化的情况很好，但是我可以在字符串中的任何位置有链接，例如
lorum ipsum link lorum Ipusum。
有些句子甚至可能有多个链接，我需要使用

或将字符串拆分为新行的替代方法，如何处理此问题而不是字符串拆分，您可以在数组中执行此操作。回答：['String lorun ipsum'，{to:'/blah'，linkText:'sdfsdf'}，'另一个字符串']，然后在频率中使用map来确定如果字符串/对象出现，要渲染哪个组件。@tomharrison尝试类似的方法，这不完全是我想要的，例如，也许有一种方法可以将字符串中的文本块包装成#，然后用
标记替换它？不过，我想我会尝试你建议的方法，因为我不确定如何做到这一点，我认为将其拆分为一个数组会很有效，尽管不是最优雅的solution@tomharrisonYep它不是最优雅的方式，但你可以认为它比危险地设置内部HTML更好。在我的字符串中的任何位置都有一个链接，例如
lorum ipsum link lorum ipsum。
有些句子甚至可能有多个链接，我需要使用

或另一种方法将字符串拆分为新行，如何处理这个问题而不是拆分字符串，您可以在数组中执行。回答：['String lorun ipsum'，{to:'/blah'，linkText:'sdfsdf'}，'另一个字符串']，然后在您的频率中使用map来确定如果字符串为/