Question

渲染功能：

if (filteredChildren.length === 0) {
  return <tbody>No projects match filter</tbody>;
}

return (
  TBody({
    children: filteredChildren.map(project => (
      <ProjectsRow key={ project.project_id }>
        {project}
      </ProjectsRow>
    ))
  })
);

这段代码看起来应该永远不会返回两个分支，但这就是我所看到的：

奇怪的是，当我确实有一些过滤值：

要完成这些废话，我们只需从代码中删除一行。

if (filteredChildren.length === 0) {
  // return <tbody>No projects match filter</tbody>; Begone!
}

return (
  TBody({
    children: filteredChildren.map(project => (
      <ProjectsRow key={ project.project_id }>
        {project}
      </ProjectsRow>
    ))
  })
);

现在一切正常，没有加倍的组件，但没有找到项目时没有有用的消息：

更新：

filterValue所在州的一些父母：

class FilterCard extends Component {
  constructor(props: any) {
    super(props);
    this.state = { filterValue: `` };
  }

  handleInput = (): void =>
    this.setState({ filterValue: this.refs.filterInput.value });

  render() {
    const { children } = this.props;

    return (
      <Row>
        <input
          ref="filterInput"
          onChange={this.handleInput}
          type="text"
        />

        { Children.map(children, child => {
          return cloneElement(child, {
            filterValue: this.state.filterValue
          });
        })}
     </Row>
    );
  }
}

直接父母：

export default function ProjectsTable({
  sort,
  order,
  router,
  children,
  filterValue
}: ProjectsTableProps): React.Element {
  return (
    <Table>
      <ProjectsColumns sort={ sort } order={ order } />
      <ProjectsRows router={ router } filterValue={ filterValue }>
        { children }
      </ProjectsRows>
    </Table>
  );
}

我应该尝试过滤其中一个父组件中的子项。不需要将过滤器值向下传递只是为了在那里过滤它。

另外作为一个疯狂的旁注，当使用Chrome元素面板进行检查时，那个带有表格上方文字的节点......甚至还没有！幽灵元素......！

更新2：

在上面的组件中过滤修复了我的问题，但我很想知道导致错误的原因是我以前的方式。我猜测React在使用表元素时会做一些奇怪的事情。

工作代码：

export default function ProjectsTable({
  sort,
  order,
  router,
  children,
  filterValue
}: ProjectsTableProps): React.Element {
  const filteredChildren = children.filter(filterProjects(filterValue));

  if (!filteredChildren.length) {
    return <div>No projects.</div>;
  }

  return (
    <Table>
      <ProjectsColumns sort={ sort } order={ order } />
      <ProjectsRows router={ router }>
        { filteredChildren }
      </ProjectsRows>
    </Table>
  );
}

React渲染以三元条件定义的两个组件

0 个答案: