Question

我在我的应用中使用react-router，它看起来像这样：

<Router history={hashHistory}>
    <Route path="/" component={Root}>
        <Route path="about" component={Child1} />
        <Route path="about" component={Child2} />
        // and so on...
    </Route>
</Router>

我想知道每次发生变化时传递给Root的孩子的类型。像这样：

if(typeof this.props.children === Child1) {
    // do stuff
}

Answer 1

孩子的类型可能各不相同，因此如果可能有多个孩子，则需要检查this.props.children[0]等，而不是children。（正如您在下面的评论中指出的那样：如果只有一个孩子，props.children显然是单身孩子;否则，它就是类似的孩子列表。）

我不知道它是否有文档记录，但children中的条目似乎有一个type属性引用该元素的构造函数：

＆＃13;

class Child1 extends React.Component {
  render() {
    return <div>Child1</div>;
  }
}
class Child2 extends React.Component {
  render() {
    return <div>Child2</div>;
  }
}
const Main = props => {
  const children = "length" in props.children
    ? Array.from(props.children)
    : [props.children];
  console.log(`Children in '${props.title}':`);
  children.forEach((child, index) => {
    console.log(`* ${index}: ${child.type.name}`);
  });
  return (
    <div style={{paddingLeft: "6px"}}>
      {props.title}
      <div>
      {props.children}
      </div>
    </div>
  );
};

ReactDOM.render(
  <div>
    <Main title="Two children">
      <Child1 />
      <Child2 />
    </Main>
    <Main title="One child of type 1">
      <Child1 />
    </Main>
    <Main title="One child of type 2">
      <Child2 />
    </Main>
  </div>,
  document.getElementById("react")
);

＆＃13;

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

在React中获取组件的子类型

1 个答案: