Question

我需要将React节点包装到此函数中：

export const foo = (WrappedComponent: *) => {
  class fooRenderer extends Component<any> {
    render() {
      const { bar, ...props } = this.props;

      if (bar) {
        ...
      }

      return <WrappedComponent {...props} />;
    }
  }

  return fooRenderer;
};

我尝试了以下操作：

class MyWrappedComponent extends React.Component {
  render() {
    ...
    return foo(
      <MyComponent
            a={a}
            b={b}
       </MyComponent>
    );
  }
}

并收到以下错误：

函数作为React子代无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

所以本质上我需要渲染foo(Component_instance)。

Answer 1

您可以在函数之外创建您的react组件

    $(wrapper).append('<div class="sampleclass"><label class="control-label col-md-3"> Phone'+ x +' </label><div class="col-md-8"><input type=text name="phone'+ x +'" class="form-control"><a href="#" class="remove_field">Remove</a></div></div>');

之后，调用函数中的组件

class fooRenderer extends Component{
   render(){
      return(
        <div>Component</div>
      )
   }
}

如果您想知道

最深处的反应组件就是功能

如何包装React组件？

1 个答案: