ReactJS - React.Children.forEach - 我可以获取子组件名称吗？ [英] ReactJS - React.Children.forEach - Can I get the child component name?

问题描述

我有一个包含许多子节点的React（15.5.4）组件，其中一些是HTML元素，另一些是其他React组件。

I have a React (15.5.4) component with many children, some of which are HTML elements and some are other React components.

我正在使用服务器渲染并在服务器和客户端上需要相同的行为。客户端将使用React的生产版本。

I'm using server rendering and need the same behavior on the server and client. The client will be using the production build of React.

我需要遍历子节点并识别特定类型的React组件。所以我的第一个想法是使用 React.Children.forEach（）进行迭代，并查找组件名称。

I need to iterate over the children and identify a specific type of React component. So my first thought was to iterate using React.Children.forEach() and look for the component name.

React.Children.forEach(this.props.children, child => {
  console.log('name =', child.name)
})

似乎 child.name 和 child.displayName 不存在。

现在， child.type 存在，并且是一个字符串（对于HTML元素），如ul或函数（对于React组件）。

Now, child.type exists, and is either a string (for HTML elements) like "ul" or a function (for React components).

当它是一个函数时，我可以使用 lodash / get 像这样 const type = get（child，'type.name'，''）来获取组件名称。 但是，这似乎只适用于服务器，而不是客户端生产版本，它返回一个字符串：t。看起来开发版本使用我的组件名称作为函数，但生产版本将其重命名为 t（）。所以我不能使用 child.type.name 。

When it's a function, I can use lodash/get like this const type = get(child, 'type.name', '') to get the component name. However, this only seems to work on the server, not in the client side production build, where it returns a string: "t". It looks like the development build uses my component name for the function, but the production build renames it to t(). So I can't use child.type.name.

我如何：

1. 迭代组件子项并识别特定类型的组件..？


2. 哪个适用于开发和生产React builds ..？

推荐答案

您可以在属性<$ c中设置组件的名称$ C>的displayName 。如果您正在使用ES6类，则可以将名为 displayName 的静态属性设置为组件的类。然后，您将能够使用 child.type.displayName 获取子名称。

You can set the component's name in the property displayName. If you're using ES6 classes, you can set a static property called displayName into component's class. Then, you'll be able to get the child name with 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"));

<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>
<div id="app"></div>

这篇关于ReactJS - React.Children.forEach - 我可以获取子组件名称吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！