'children' не определено - в компоненте класса React - PullRequest
Новая
       10

'children' не определено - в компоненте класса React

0 голосов
/ 15 апреля 2019

Итак, у меня есть компонент без состояния, который использует '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 Ответ

0 голосов
/ 15 апреля 2019

Вы не определили переменную children в вашем методе рендеринга. Реквизиты задаются в качестве первого аргумента для компонента функции, но они доступны в 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>
    );
  }
}
...