反应路由器 - 如何从内容呈现链接

Question

如何从包含内容的段落中呈现 react-router Link 组件？ 它可能在随机位置，我找不到将 content 参数轻松分配到 beforeText、link 和 afterText 对象

假设我正在构建一个博客，其中博客文章部分将带有一些 url 的内容传递给文本呈现组件，它是链接到内部应用程序路由（或者可能不是，只是纯文本）

  class ParentComponent extends Component{
    render(){
      <Content content='Lorem ... <Link to="/page">Some link</Link> lorem ipsum ...'
    }
  }


  class Content extends Component {
     const { content } = this.props
     render(){
       <div className="text-section">
         {content}
       </div>
     }
   }

Answer 1

您应该使用 this.props.children 来传递嵌套组件，以便它们可以直接呈现。您的代码应如下所示：

 class ParentComponents extends Component{
     render(){
         <Content>
          <p>Lorem ...<Link to="/page">Some link</Link>lorem ipsum</p>
         </Content> 
     }
 }


class Content extends Component {
    render(){
        <div className="text-section">
            {this.props.children}
        </div>
    }

}