'children' 未定义 - 在 React 类组件中

IT技术 javascript reactjs children
2021-05-10 02:05:30

所以,我有一个使用“React.Children.map()”的无状态组件,我想把它变成一个类组件来添加一个状态,但因为我不能(我知道)将 {children} 作为属性传递再一次,我收到错误消息,说未定义“儿童”。如何定义孩子?

原始无状态组件:

import React from 'react';

const Tabs = ({ children }) => (
  <div className="tabsPanel" onClick={clickHandler}>
    {React.Children.map(children, child =>
      React.cloneElement(child, { clickHandler: () => console.log('clicked') })
    )}
  </div>
);

export default Tabs;

类组件:

import React, { Component } from 'react';

class Tabs extends Component {
  render() {
    return (
      <div className="tabsPanel">
        {React.Children.map(children, child =>
          React.cloneElement(child, {
            clickHandler: () => console.log('clicked', child.props.children),
          })
        )}
      </div>
    );
  }
}

export default Tabs;
1个回答

您尚未children在渲染方法中定义变量。props 作为函数组件的第一个参数给出,但它们this.props在类组件中可用

class Tabs extends Component {
  render() {
    return (
      <div className="tabsPanel">
        {React.Children.map(this.props.children, child =>
          React.cloneElement(child, {
            clickHandler: () => console.log('clicked', child.props.children),
          })
        )}
      </div>
    );
  }
}