在安装时动态交换组件会导致未正确的错误。

Question

我正在开发一个React应用程序，它只需要加载View组件或Edit组件。为了解决这个问题我有以下代码..。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './app.js';

ReactDOM.render((
<BrowserRouter>
<App /> 
</BrowserRouter>), document.getElementById('main')
);

App.Js

import React from 'react';
import ReactDOM from 'react-dom';
import  '../scss/custom.scss';
import Patient from './components/patient.js';


export default class App extends React.Component {
  render() {
    return (
      <Patient />
    );
  }
};

Patient.js:病人包含概述，COMPPROPS包含传递给OverviewWrapper的compState

import React from 'react';
import ReactDOM from 'react-dom';
...
import OverviewWrapper from '../components/patientoverviewwrapper.js';

export default class Patient extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);

    this.state = {
      PATIENT: [],
      COMPPROPS: [],
    };
   }

componentDidMount() {   

//this function gets the data that will load in either the View or Edit Form
getPatient().then((result) => {
    this.setState({PATIENT: result});
});
//this function gets the data to determine if either the edit or view form should load
loadOverviewEditPane(activity); 
}
render() {
  return (
  ...
 <Box colorIndex='light-2'  direction='row' flex={false}>
                             return (
                               <OverviewWrapper overview={this.state.overview} state={this.state.compState} />
                             );
                      </Box>

OverviewWrapper.js

import React from 'react';
import ReactDOM from 'react-dom';
import autoBind from 'react-autobind';
import OverviewPane from '../components/patientoverview.js';
import OverviewEditPane from '../components/patientoverviewedit.js';

export default class OverviewWrapper extends React.Component {

constructor(props) {
    super(props);
    autoBind(this);
  }

render() {
    const ov = this.props.overview
    const type = this.props.compState


    let OverviewWrapper = null
    switch (type) {
        case "Edit" : OverviewWrapper = <OverviewEditPane overview={ov} />
        break
        default: OverviewWrapper = <OverviewPane overview={ov} />
        break
    }

    return (
        React.createElement(OverviewWrapper, this.props, null)
    )
}
}

当我运行应用程序时，我会在控制台中得到以下错误。

未明错误:元素类型无效:期望一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但是got: object。检查OverviewWrapper**.** 的呈现方法

我的第一次这样做，似乎我应该使用包装设计，这是我在这里使用，但任何建议，将不胜感激。

Answer 1

也许可以稍微改变一下方法，先设置组件类型，然后设置它的道具：

render() {
  const ov = this.props.overview
  const type = this.props.compState

  let OverviewWrapper = null
  switch (type) {
    case "Edit":
      OverviewWrapper = OverviewEditPane
      break
    default:
      OverviewWrapper = OverviewPane
      break
  }

  return <OverviewWrapper {...this.props} overview={ov} />
}

工作样本：

​

const OverviewEditPane = ({ overview }) =>
  <div>
    OverviewEditPane: {overview.name}
  </div>

const OverviewPane = ({ overview }) =>
  <div>
    OverviewPane: {overview.name}
  </div>

class App extends React.Component {
  render() {
    const Component = this.props.type === 0 ? OverviewEditPane: OverviewPane
    return (
      <div>
        <Component {...this.props} />
      </div>
    )
  }
}

const overview = { name: 'test' }

ReactDOM.render(
  <div>
    <App type={0} overview={overview} />
    <App type={1} overview={overview} />
  </div>,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

​