Question

我正在尝试：

<ItemList 
  onItemSelected={this.onPersonSelected}
  getData={this.service.getAllPeople}>{

  (item) => (
    `${item.name} (${item.birthYear})` //Yes, it is a function
    )

  }</ItemList>

然后我在ItemList中调用this.props.children时出现错误“ TypeError：this.props.children不是函数”。

在这里我称之为ItemList中的代码：

renderItems(arr) {

return arr.map((item) => {
  const { id } = item;

  const label = this.props.children(item); // Here React breaks

  return (
    <li className="list-group-item"
        key={id}
        onClick={() => this.props.onItemSelected(id)}>
      {label}
    </li>
  );
});
}

Answer 1

我不知道为什么要在Element的children中放置一个函数，我认为该位置仅用于字符串或其他元素。

您可以像这样在其渲染方法中分配label：

<ItemList 
  onItemSelected={this.onPersonSelected}
  getData={this.service.getAllPeople}>
</ItemList>

renderItems(arr) {

  return arr.map((item) => {
    const { id } = item;

    const label = `${item.name} (${item.birthYear})`; // Just assign it here

    return (
      <li className="list-group-item"
          key={id}
          onClick={() => this.props.onItemSelected(id)}>
        {label}
      </li>
    );
  });
}

或者，如果您真的想在其父元素中定义模板，请在props而不是其children中进行修改：

<ItemList 
  onItemSelected={this.onPersonSelected}
  getData={this.service.getAllPeople}
  template={ item => `${item.name} (${item.birthYear})` }> { // Here goes the template }
</ItemList>

renderItems(arr) {

  return arr.map((item) => {
    const { id } = item;

    const label = this.props.template(item);

    return (
      <li className="list-group-item"
          key={id}
          onClick={() => this.props.onItemSelected(id)}>
        {label}
      </li>
    );
  });
}

反应TypeError：this.props.children不是函数

1 个答案: