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

Question

我想在每次调用时显示具有不同值的自定义 Tire 元素或简单 div（取决于媒体查询）。但是三元运算符不起作用（总是显示 Tire 元素，从不 div），我得到的是“undefined”而不是应该是它内容的字符串“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

Answer 1

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

这已分配给 props 变量。

然后您阅读 props.title。

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

你的道具类型说第一个参数应该是一个 object，它包含两个属性（title 和 content）。

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

Answer 2

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

要做到这一点，您应该做到：

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

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

Changing HTML tag with Props in React JS

javascript

conditional-operator

media-queries

reactjs

react-props