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

Question

所以，我有一个使用 'React.Children.map()' 的无状态组件，我想把它变成一个 class 组件来给它添加一个状态，但是因为我不能（据我所知）传递 { children} 作为属性了，我收到错误消息说 'children' 未定义。如何定义 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;

class 分量：

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;

Answer 1

您还没有在渲染方法中定义 children 变量。道具作为功能组件的第一个参数给出，但它们在 class 组件中的 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>
    );
  }
}

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

'children' is not defined - in React class component

javascript

children

reactjs