React / React-native-获取自定义组件的子级

Question

我正在尝试编写一个可以遍历组件子级并找到某种类型元素的模块。

我一直未能找到一种方法来破坏自定义组件的构造块，并查看正在使用哪些元素来构建该自定义组件。

function recursiveMap(children, fn) {
  return React.Children.map(children, (child, i) => {
    if (!React.isValidElement(child)) {
      return child
    }
    if (child.props.children) {
      child = React.cloneElement(child, {
        children: recursiveMap(child.props.children, fn)
      })
    }
    return fn(child, i)
  })
}

使用此代码，我能够遍历组件的子树，但是我希望能够看到每个自定义组件的构造块，无论它们是其他自定义组件还是基本的html元素。

有什么想法吗？

Answer 1

您可以在属性displayName中设置组件的名称。如果使用ES6类，则可以在组件的类中设置一个名为displayName的静态属性。然后，您将可以使用child.type.displayName获得孩子的名字。

const FirstChild = ({ name }) => <li>{name}</li>;
FirstChild.displayName = 'FirstChild';

const SecondChild = ({ name }) => <li>{name}</li>;
SecondChild.displayName = 'SecondChild';

class ThirdChild extends React.Component {
  static displayName = 'ThirdChild';

  render() {
    return (
      <li>{this.props.name}</li>
    );
  }

}

class Parent extends React.Component {
  componentDidMount() {
    React.Children.forEach(this.props.children, child => {
      console.log('name =', child.type.displayName);
    })
  }

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

class App extends React.Component {
  render() {
    return (
      <Parent>
        <FirstChild name='1st child value' />
        <SecondChild name='2nd child value' />
        <ThirdChild name='3rd child value' />
      </Parent>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("app"));