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

【问题标题】：Pass props to a react-redux component wrapped in a variable将 props 传递给包装在变量中的 react-redux 组件
【发布时间】：2018-01-17 05:59:37
【问题描述】：

我的模态组件中有以下_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.

Content 是一个 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'
      }
    }
  }

【问题讨论】：

<Content {...props} /> 应该可以工作，你确定Content 是你包装的NewGroup 组件吗？您没有显示填充 content={} 道具的代码
是的，我发现了问题，我必须将<NewGroup /> 更改为NewGroup，就像GroupList 一样。（我更新了帖子）

标签： javascript reactjs

【解决方案1】：

在原始帖子中看不到的问题是，您将渲染的 content: <Content /> 组件传递给包含 _render() 的组件，而应该是 content: Content 仅传递组件类。

【讨论】：