在 React JS 中使用 Props 更改 HTML 标签答案

【问题标题】：Changing HTML tag with Props in React JS在 React JS 中使用 Props 更改 HTML 标签
【发布时间】：2021-06-04 03:52:49
【问题描述】：

我想在每次调用时使用不同的值显示我的自定义轮胎元素或简单的 div（取决于媒体查询）。但是三元运算符不起作用（总是显示轮胎元素，从不显示 div），我得到的是“未定义”而不是字符串“1”，它应该是它的内容。

谁能解释一下我哪里出错了？

const Content = () => {
  const isDesktop = window.matchMedia('(min-width: 110em)')

  const displayTire = (props) => (isDesktop.matches
    ? <Tire className={`${props.title}`}>{`${props.content}`}</Tire>
    : <div className={`${props.title}`}>{`${props.content}`}</div>)

  displayTire.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired
  }

  return (
        {displayTire('pneu1', '1')}
  )

export default Content

【问题讨论】：

标签： javascript reactjs media-queries react-props conditional-operator

【解决方案1】：

您传递的第一个参数是'pneu1'。

这是分配给props 变量。

然后您阅读props.title。

字符串没有title 属性，因此该值未定义。

您的道具类型表明第一个参数应该是一个 object，其中包含两个属性（title 和 content）。

传递一个与定义匹配的对象，而不是两个纯字符串。

【讨论】：

【解决方案2】：

您实际上并没有为 displayTire 的道具提供标题和内容。

为此，您应该这样做：

  return (
        {displayTire({ title: 'pneu1', content: '1'})}
  )

【讨论】：