正如错误所说 this.props.children 不是函数或 React Class（这是一个函数），而是通过调用该函数创建的对象。

您可以使用它来解决问题

render() {
 return React.cloneElement(this.props.children, this.getState())
}

这将带孩子，使用额外的props克隆它。

遵循渲染props模式，你需要让你的孩子作为一个函数，所以你确实会写

import React from 'react';
import { render } from 'react-dom';


const Box = ({color}) => (
  <div>
    this is box, with color of {color}
  </div>
);

class ColoredBox extends React.Component {
  state = { color: 'red' }
  getState() {
    return {
      color: this.state.color
    }
  }
  render() {
    return this.props.children(this.getState())
  }
}

render(<ColoredBox>{(color) => <Box color={color}/>}</ColoredBox>, document.getElementById('root'));

另外要清楚的是，当您像这样渲染无状态功能组件时，它不会与函数一样对待 <Box/>

但是，您可以使用上述无状态功能组件，例如

<ColoredBox>{Box}</ColoredBox>

它会起作用

演示

你传递一个 React 对象作为props：

(<ColoredBox><Box /></ColoredBox>)

因此它不是一个函数。

利用：

render() {
    return this.props.children
}

或者，如果你愿意，你可以传递一个函数作为子props（渲染props）：

<ColoredBox>
  {state => <Box />}
</ColoredBox>

render() {
  return this.props.children(this.state)
}