javascript - props.children中的响应不能成为无状态组件吗？

我正在尝试在 react 中练习渲染 Prop ，但是我遇到了错误



这是我的代码

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><Box /></ColoredBox>, document.getElementById('root'));

https://codesandbox.io/s/8z0xmk9ojl

最佳答案

按照render props模式，您需要将您的 child 作为一个函数，因此您确实可以编写

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>

它会工作

Demo

关于javascript - props.children中的响应不能成为无状态组件吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49891935/