Как добавить активное свойство CSS к компоненту React?

#css #reactjs

Вопрос:

Я пытаюсь добавить некоторый стиль, чтобы при нажатии на элемент он имел другой цвет фона.

У меня есть приложение класса, которое импортирует класс ItemSection, который импортирует класс ItemList. Как в ItemSection, так и в ItemList я activeItem: React.PropTypes.object.isRequired объявил в своих PropTypes .

Я думаю, что проблема в методе рендеринга моего приложения:

   render(){
return(
  <div className = 'app'>
    <div className = 'manipulateItem'> {/*Need a better className*/}
      <ItemSection
        items = {this.state.items}
        addItem = {this.addItem.bind(this)}
        setItem = {this.setItem.bind(this)}
        deleteItem = {this.deleteItem.bind(this)}
        editItem = {this.editItem.bind(this)}
        activeItem = {this.state.activeItem} /*THIS LINE I BELIEVE*/
      />
    </div>
  </div>
)
}

И это моя трассировка:

bundle.js:1251 Предупреждение: ошибка тип реквизита: требуемый реквизит activeItem не был указан ItemList . в ItemList (созданном ItemSection) в ItemSection (созданном App) в div (созданном App) в div (созданном App) в App

1. Это происходит из списка элементов, не могли бы вы опубликовать код всех трех компонентов, пожалуйста. Также ваш вопрос изначально касается цвета фона, а затем он переключается на предупреждение propType. Просто пытаюсь понять, в чем ваша главная проблема.

Ответ №1:

В своем вопросе вы указываете, что вы activeItem: React.PropTypes.object.isRequired объявили в своих PropTypes, но вы специально запрашиваете ActiveItem в state object — activeItem = {this.state.activeItem} . Если вы хотите использовать значение ActiveItem в реквизите, который вы передаете компоненту, тогда вы должны использовать this.props.activeItem .

Надеюсь, это поможет!

1. Что ж, я изменил это, и теперь я получаю другую ошибку: bundle.js:1251 Предупреждение: ошибка тип реквизита: требуемый реквизит activeItem не был указан ItemList . в ItemList (созданном ItemSection) в ItemSection (созданном App) в div (созданном App) в div (созданном App) в приложении Что странно, так это то, что у меня также есть ActiveItem = {this.props.ActiveItem} в ItemList.jsx

2. Если я правильно понимаю, у вас есть app.js который представляет собой компонент с функцией рендеринга, которая ItemSection ItemSection выполняет рендеринг, и вы хотите применить вызываемое свойство activeItem и передать это свойство, значение this.props.activeItem которого исходит из реквизитов приложений по умолчанию. Итак, если вы получаете сообщение об ошибке типа error: bundle.js:1251 Warning: Failed prop type: Required prop activeItem was not specified in ItemList. then, это означает activeItem , что передаваемое вами свойство ItemSection , вероятно, не определено.

3. App.jsx создает ItemSection, который создает ItemList, правильно? поэтому, если вам нужно использовать this.props.activeItem для установки имени класса или чего-то еще, просто добавьте что-то вроде className={this.props.activeItem ? 'active-item' : ' '}