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

Question

I want to display my custom Tire element or simple div (depending on media queries) with different values on each call. But the ternary operator doesn't work (always displays Tire element, never div) and I'm getting "undefined" instead of string "1" that should be it's content.

Would anyone be so kind as to explain where I went wrong?

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

The first argument you pass is 'pneu1' .

This is assigned to the props variable.

You then read props.title .

Strings don't have title properties so the value is undefined.

---

Your prop types says that the first argument should be an object which contains two properties ( title and content ).

Pass an object that matches the definition instead of two plain strings.

Answer 2

You're not actually providing a title and content to the props of displayTire.

To do that, you should have done:

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