почему компонент высокого порядка не работает в реакции?

не могли бы вы сказать мне, почему этот компонент высокого порядка не работает. Я пытаюсь показать кнопку и метку, используя HOC. Вот мой код

http://codepen.io/anon/pen/ygpVeZ

var D = (comp) => class extends React.Component{
  render (){
    return (<comp/>)
  }
}

class A extends React.Component {
  render(){
    return (
      <button>hrllo</button>
    )
  }
}
class B extends React.Component {
  render(){
    return (
      <label> hello</label>
    )
  }
}

const PP =D(B)
const PPP =D(A)

class C extends React.Component {
  render(){
    return (
      <div>
         <PP></PP>
          <PPP></PPP>
      </div>

    )
  }
}

ReactDOM.render(<C/>,document.getElementById('root'))

reactjs react-dom react-redux react-router
person user944513    schedule 30.01.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Компоненты React должны начинаться с заглавной буквы, как вы можете прочитать в документы.

Заглавные буквы указывают, что тег JSX относится к компоненту React. Эти теги компилируются в прямую ссылку на именованную переменную, поэтому, если вы используете выражение JSX, Foo должен быть в области видимости.

var D = (comp) => class extends React.Component{
  render (){
    return (<comp/>)
  }
}

должно быть

var D = (Comp) => class extends React.Component{
  render (){
    return (<Comp/>)
  }
}

codepen

person QoP    schedule 30.01.2017
comment
спасибо за ответ .. не могли бы вы рассказать мне, как показать значение состояния count в дочернем компоненте codepen.io/anon /pen/ygpVeZ - person user944513; 30.01.2017