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

【问题标题】：'children' is not defined - in React class component'children' 未定义 - 在 React 类组件中
【发布时间】：2019-09-05 06:47:27
【问题描述】：

所以，我有一个使用“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;

【问题讨论】：

使用this.props.children，因为在功能组件中，您正在从与 props.children 相同的道具中解构孩子，但在类组件中，它将在 this.props. 中可用

标签： javascript reactjs children

【解决方案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>
    );
  }
}

【讨论】：

they are available at this.props in a class component. 是我想要的答案