semantic-ui-реакции Список объявлений по клику

Question

Я пытаюсь создать список документов динамически с семантической-UI-реагировать. Я хочу вернуть заголовок документа при нажатии на элемент списка. Согласно документации: https://react.semantic-ui.com/elements/list

есть onItemClick по этой причине, однако, когда я использую его, я получаю предупреждение, когда он отображается:

Предупреждение: сбойный тип опоры: опора onItemClick в List конфликтует с реквизитом: children, Они не могут быть определены вместе, выберите один или другой.

Также нажатие на элемент списка ничего не делает (атм я просто хочу записать название документа в консоль). Вот код:

handleListItemClick(event, data) {
  console.log("list item clicked: " + data.value);
}


buildResultsContainer() {
    return this.props.listOfResults.map((document,index) =>
      {
        return (
            <List.Item
              as='a'
              key={index}>
                <Icon name='file' />
                <List.Content>
                  <List.Header>{document.properties.title}</List.Header>
                  <List.Description>
                    {document.properties.description}
                  </List.Description>
                </List.Content>
            </List.Item>
      );
      }
    );
  }

  render() {
    return (
      <div>
        <List onItemClick={this.handleListItemClick}>
          {this.buildResultsContainer()}
        </List>
      </div>
    )
  }

Подскажите, пожалуйста, как правильно использовать реквизит onItemClick для компонента List?

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

Большое спасибо!

Answer 1

Я думаю, что возможно при использовании onItemClick что вы бы использовали items поддержать List с тех пор у вас не будет никаких children например

render() {
    const items = this.props.listOfResults.map(document => {
      return {
        icon: 'file',
        content: document.properties.title,
        description: document.properties.description,
        onClick: e => console.log(document.title)
      }
    });

    return <List items={items} />
  }

Если бы у вас был listOfResults опора в вышеуказанном формате, вам даже не нужно было бы делать это map и ваш render функция была бы очень жесткой:

render() {
  return <List items={this.props.listOfResults} />;
}

С другой стороны, List.Item занимает onClick опора, которую вы могли бы определить в своем buildResultsContainer() функция. Потому что каждый onClick функция является уникальной в зависимости от текущего document объект, вам нужно будет использовать анонимную функцию для вызова вашего handleClick функционировать следующим образом:

<List.Item
  onClick={() => this.handleClick(document.title)}
  ...etc
/>

Вы бы тогда имели:

handleClick = docTitle => {
  console.log(docTitle);
};

Если то, что вы хотели, можно было получить из event.targetВы могли бы просто передать ссылку handleClick к onClick т.е.

handleClick = event => {
    console.log(e.target.innerText);
};

<List.Item
  onClick={this.handleClick}
/>