props.children in react不能成为无状态组件?

时间:2018-04-18 05:37:45

标签: javascript reactjs ecmascript-6

我正在尝试练习渲染道具模式,但我得到错误

  

this.props.children不是函数

这是我的代码

import * as Autosuggest from "react-autosuggest";

import AutosuggestHighlightMatch from "autosuggest-highlight/umd/match";
import AutosuggestHighlightParse from "autosuggest-highlight/umd/parse";

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

3 个答案:

答案 0 :(得分:3)

正如错误所说this.props.children不是函数或React类(它是一个函数),而是通过调用该函数创建的对象。

您可以使用它来解决问题

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

这将带孩子,使用额外的道具克隆它。

答案 1 :(得分:2)

在渲染道具模式之后,你需要将你的孩子作为一个功能,所以你确实要写

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

答案 2 :(得分:0)

您将React对象作为props传递:

render() {
    return this.props.children
}

因此它不是一种功能。

使用:

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

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

或者,如果你想要,你可以传递一个函数作为儿童道具(render-props):

@RefreshScope
@Configuration // @Component also not working
public class HessianConfiguration {

    @Value("${sample.hessian.url}")
    private String sampleUrl;

    @Bean
    public HessianProxyFactoryBean initSampleBean() {

        HessianProxyFactoryBean invoker = new HessianProxyFactoryBean();
        invoker.setServiceUrl(sampleUrl);
        invoker.setServiceInterface(Sample.class);
        return invoker;
    }
}