我正在尝试从任何数组声明并返回多个HOC,但始终返回“函数无效作为React子代”。错误。以前有人遇到过这个问题吗?
JS:
....
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
const withRequestAnimationFrame = () => WrappedComponent => {
class RequestAnimationFrame extends Component {
state = {
timeStamp: 0,
newItem: "Test"
};
componentDidMount() {
const min = 1;
const max = 100;
const rand = Math.floor(Math.random() * (max - min + 1)) + min;
this.setState({ timeStamp: this.state.timeStamp + rand });
}
render() {
return (
<WrappedComponent {...this.state} {...this.props} />
)
}
}
return RequestAnimationFrame;
};
const App = ({ timeStamp, newItem }) => (
<div style={styles}>
<h1>{timeStamp}</h1>
<p>{newItem}</p>
</div>
);
const arrayItems = ["EnhancedApp", "EnhancedApp2"];
const Products = ({ items }) => {
return (
items.map((item, index) => (
item = withRequestAnimationFrame()(App)
))
)
};
function Product() {
return (
<div>
<Products items={arrayItems} />
</div>
)
}
render(<Product />, document.getElementById("root"));
答案 0 :(得分:1)
这是问题所在:
Select name1, name2,
case when left(name2,4) = 'abcd'
then substring(name2,4)
else name2
end as name2
From TableName
where name2 like 'Input'
您在那里所做的是分配withRequestAnimationFrame()(App)的结果 功能绝对不是您想要的。我想你想 在那里渲染withRequestAnimationFrame组件的多个实例。您可以 这样做:
item = withRequestAnimationFrame()(App)
第二个问题是您没有将道具传递给包装的组件。 要传递道具,您应该这样做:
items.map((item, index) => (
const NewComponent = withRequestAnimationFrame(item)(App);
return <NewComponent key={index}/>
))