'children' 未定義 - 在 React 類組件中

Question

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

Answer 1

您尚未在 render 方法中定義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>
    );
  }
}