相关疑难解决方法(0)

给出一个渲染其子代的简单组件:

class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default ContainerComponent;

问题:儿童道具的propType应该是什么？

当我将其设置为对象时,当我使用具有多个子元素的组件时,它会失败:

<ContainerComponent>
  <div>1</div>
  <div>2</div>
</ContainerComponent>

警告:失败的道具类型: 提供children的类型的无效道具,预期.arrayContainerComponentobject

如果我将它设置为一个数组,如果我只给它一个孩子,它将会失败,即:

<ContainerComponent>
  <div>1</div>
</ContainerComponent>

警告:失败的道具类型:提供给ContainerComponent的类型对象的无效道具子项,预期数组.

请指教,如果我不打算对儿童元素进行propTypes检查？

题

如何确认通过道具(children例如)收到的反应元素在我的渲染方法中是否为给定类型？

例:

说我有一个List元素和一个ListItem元素.在渲染方法中List,我想寻找所有被传递的孩子,并对任何孩子做一些特别的事情ListItem.

我确实找到了一个有效的实现,但只有经过反复试验才能实现.请参阅下面的代码.(React 15.4.2)

List.jsx

import ListItem from 'list-item';

...

React.Children.map(children, child => {
  console.log(child);     // function ListItem() { ... }
  console.log(ListItem);  // function ListItem() { ... }

  if (isListItem(child)) {
    return (...);
  }
  return child;
})

// this implementation does not work
isListItem(element) {
  return (element.type === ListItem);
}

// this implementation does work, but might break if I'm using something like uglify or if I …

我正在尝试制作自己的Tabs组件,以便我可以在我的应用中使用标签.但是,我似乎在尝试按类型提取我需要的子组件时遇到问题.

import React from 'react'

export class Tabs extends React.Component {
  render() {
    let children = this.props.children
    let tablinks = React.Children.map(children, x => {
      console.log(x.type.displayName) // Always undefined
      if (x.type.displayName == 'Tab Link') {
        return x
      }
    })

    return (
      <div className="tabs"></div>
    )
  }
}

export class TabLink extends React.Component {
  constructor(props) {
    super(props)
    this.displayName = 'Tab Link'
  }
  render() {
    return (
      <div className="tab-link"></div>
    )
  }
}

<Tabs>
    <TabLink path="tab1">Test</TabLink>
    <TabLink path="tab2">Test2</TabLink>
</Tabs>

我console.log永远不会返回"Tab Link",它总会返回 …

我只允许将特定组件作为子组件。例如，假设我有一个Menu组件，该组件仅应包含MenuItem子元素，如下所示：

<Menu>
  <MenuItem />
  <MenuItem />
</Menu>

因此，当我尝试将另一个组件作为子组件时，我希望Typescript在IDE中向我抛出错误。警告我只能MenuItem当孩子的东西。例如在这种情况下：

<Menu>
  <div>My item</div>
  <div>My item</div>
</Menu>

该线程几乎相似，但不包括TypeScript解决方案。我想知道是否可以使用TypeScript类型和接口解决问题。在我的想象中，它看起来像这样，但是类型检查当然不起作用，因为子组件具有Element类型：

type MenuItemType = typeof MenuItem;

interface IMenu {
  children: MenuItemType[];
}

const MenuItem: React.FunctionComponent<IMenuItem> = ({ props }) => {
  return (...)
}

const Menu: React.FunctionComponent<IMenu> = ({ props }) => {
  return (
    <nav>
      {props.children}
    </nav>
  )
}

const App: React.FunctionComponent<IApp> = ({ props }) => {
  return (
    <Menu>
      <MenuItem />
      <MenuItem />
    </Menu>
  )
} …