ReactJS - React.Children.forEach - 我可以获得子组件名称吗?

新手上路,请多包涵

我有一个包含许多子项的 React (15.5.4) 组件,其中一些是 HTML 元素,一些是其他 React 组件。

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

我需要遍历子组件并确定特定类型的 React 组件。所以我的第一个想法是使用 React.Children.forEach() 进行迭代并查找组件名称。

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

似乎 child.namechild.displayName 不存在。

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

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

我如何能:

  1. 遍历子组件并识别特定类型的组件..?
  2. 哪个适用于开发和生产 React 构建..?

原文由 Stephen Last 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 887
2 个回答

您可以在属性中设置组件的名称 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"));
 <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>

原文由 Julio Betta 发布,翻译遵循 CC BY-SA 3.0 许可协议

如果您使用的是 Babel,则可以使用此 Babel 插件自动设置 displayName ,这样 child.type.displayName 将等于您为组件命名的字符串:

https://www.npmjs.com/package/babel-plugin-add-react-displayname

它易于安装和使用,只需阅读说明并确保将插件名称 add-react-displayname 添加到 .babelrc 文件中的插件数组中。

原文由 Steven Anderson 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题