从React JS中的Array返回多个HOC组件

时间:2019-11-12 21:06:42

标签: javascript reactjs higher-order-components

我正在尝试从任何数组声明并返回多个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"));

1 个答案:

答案 0 :(得分:1)

  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)
    
  2. 第二个问题是您没有将道具传递给包装的组件。 要传递道具,您应该这样做:

    items.map((item, index)  => (
        const NewComponent = withRequestAnimationFrame(item)(App);
        return <NewComponent key={index}/>
    ))