如何将字符串和组件作为props传递?

IT技术 javascript reactjs jsx
2021-05-17 22:12:54

我可以通过这样的罚款:

<CardTitle title={this.props.post.title} subtitle={
    <Link to={this.props.post.author}>{this.props.post.author}</Link>
} />

但我需要传递一个组件和一些字符串文本,但这样做不起作用:

<CardTitle title={this.props.post.title} subtitle={(`
    This is a link: ${<Link to={this.props.post.author}>{this.props.post.author}</Link>}
`)} />

什么是正确的语法?

1个回答

尝试将它作为 React Element 完全传递,而不是作为字符串:

<CardTitle
  title={this.props.post.title}
  subtitle={
    <span>
      This is a link: <Link to={this.props.post.author}>{this.props.post.author}</Link>
    </span>
  }
/>

然后应该能够按subtitle原样呈现如果您使用 React > 16,您可能需要为此使用Fragments

import { Fragment } from 'react';

// ...

subtitle={
  <Fragment>
    This is a link: <Link to={this.props.post.author}>{this.props.post.author}</Link>
  </Fragment>
}