Question

我正在开发一个React应用程序，无论是需要加载View Only Form Component还是Edit Component。为了解决这个问题，我有以下代码......

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：PATIENT包含Overview和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)
    )
}
}

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

未捕获错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：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} />
}

工作样本：

＆＃13;

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')
)

＆＃13;

<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>

＆＃13;

挂载时动态交换组件导致未捕获错误

1 个答案: