Question

我的模态组件中有以下_render方法：

  _render() {
    const {content: Content, className: customClassName} = this.props;
    let className = `${customClassName} modal-container`;
    ReactDOM.render(
      <Provider store={store}>
        <div className={className}>
          {Content}
        </div>
      </Provider>,
      this.modalTarget
    );
  }

由componentDidMount调用：

  componentDidMount() {
    this.modalTarget = document.createElement('div');
    this.modalTarget.className = "modalContainer";
    this.container.appendChild(this.modalTarget);
    this._render();
  }

我想将我的模态组件收到的道具传递给Content组件。

我已经尝试了<Content {...props} />，但它会抛出：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

内容是react-redux组件：

class NewGroup extends Component {

  _onSubmit(values) {
    //.....
  }

  _onCancel() {
    //.....
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        <form onSubmit={handleSubmit(this._onSubmit.bind(this))}>
          {_.map(FIELDS, renderField.bind(this))}
          <button type="submit" className="btn btn-primary">Create</button>
          <button className="btn btn-primary" onClick={this._onCancel.bind(this)}>Cancel</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({
  validate,
  form:'NewGroup',
  fields: _.keys(FIELDS),
  fields_def: FIELDS
})(
  connect(null, { createGroup })(NewGroup)
);

Content是：

Object
   $$typeof: Symbol(react.element)
   _owner:null
   _self:null
   _source:null
   _store:Object
   key:null
   props:Object
   ref:null
   type:ConnectedForm()
   __proto__:Object

更新1

内容实际上来自路由器。我有一个路由列表对象，它将路径名映射到组件

  'group/new': {
    'path': '/group/new',
    'component': GroupList,
    'props': {
      'modal': {
        'content': <NewGroup />,
        'className': 'new-group-modal'
      }
    }
  }

Answer 1

原始帖子中未显示的问题是您将已呈现的content: <Content />组件传递给包含_render()的组件，而该组件应该content: Content传递组件仅限课程。

将props传递给包含在变量中的react-redux组件

1 个答案: