我正在尝试练习渲染道具模式,但我得到错误
this.props.children不是函数
这是我的代码
import * as Autosuggest from "react-autosuggest";
import AutosuggestHighlightMatch from "autosuggest-highlight/umd/match";
import AutosuggestHighlightParse from "autosuggest-highlight/umd/parse";
答案 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;
}
}