Javascript 在React中渲染动态子组件

我有一个菜单组件，它应该在另一个容器组件中动态加载元素。但是，永远不会渲染子元素

App.js

import React, { Component } from 'react';
import './App.css';
import Menu from './components/navigation/Menu';
import Header from './components/navigation/Header';
import Container from './components/navigation/Container';

class App extends Component {
 render() {
    return (
      <div className="App" >
        <Header />
        <Menu OnMenuChange={(appName) => { this.setState({ currentApp: appName }) }} />
        <Container App={this.state.currentApp}/>
      </div>
    );
  }
}


export default App;

---

然后将该列表传递到菜单中，该菜单现在将返回“类型”而不是名称。这样做效果更好，因为名称中现在可以有空格。

我认为问题可能是在第一次渲染时，您的

状态

对象未定义，然后阻止对其进行任何类型的更新。我可能只是将它设置为空对象来初始化它

class MyComponent extends Component {
  state = {
    App: null
  }
}

例如：

---

我认为问题可能是在第一次渲染时，您的

状态

对象未定义，然后阻止对其进行任何类型的更新。我可能只是将它设置为空对象来初始化它

class MyComponent extends Component {
  state = {
    App: null
  }
}

例如：

---

让我们考虑一下JSX的这种转换为：

<this.props.App />

…现在回顾一下

React.createElement

的作用。发件人：

createElement（） 创建并返回给定类型的新React元素。类型 参数可以是标记名字符串（例如

'div'

或

'span'

），或React组件类型（类或函数）

从外观上看，代码中的this.props.App是一个字符串。无论该字符串是

'div'

还是

'MyFancyApp'

，React都假定它是HTML标记的名称（因为它怎么做其他事情呢？）

如果要将

this.props.App

视为组件，则

this.props.App

的值必须是实际的组件类或函数，而不是带有组件名称的字符串。您可以将菜单组件更改为将组件而不是字符串传递到

OnMenuChange

，也可以对应用程序组件进行如下更改：

import PeopleApp from './PeopleApp';
import PlacesApp from './PlacesApp';

const APPS_BY_NAME = { PeopleApp, PlacesApp };

class App extends Component {
 render() {
    return (
      // ...
      <Container App={APPS_BY_NAME[this.state.currentApp]}/>
      // ...
    );
  }
}

从“/PeopleApp”导入PeopleApp；
从“/PlacesApp”导入PlacesApp；
const APPS_BY_NAME={PeopleApp，PlacesApp}；
类应用程序扩展组件{
render（）{
返回(
// ...
// ...
);
}
}
>P>让我们考虑一下JSX的这种转换为：

<this.props.App />

…现在回顾一下
React.createElement
的作用。发件人：

createElement（）
创建并返回给定类型的新React元素。类型
参数可以是标记名字符串（例如
'div'
或
'span'
），或React组件类型（类或函数）

从外观上看，代码中的this.props.App

是一个字符串。无论该字符串是

'div'

还是

'MyFancyApp'

，React都假定它是HTML标记的名称（因为它怎么做其他事情呢？）

如果要将

this.props.App

视为组件，则

this.props.App

的值必须是实际的组件类或函数，而不是带有组件名称的字符串。您可以将菜单组件更改为将组件而不是字符串传递到

OnMenuChange

，也可以对应用程序组件进行如下更改：

import PeopleApp from './PeopleApp';
import PlacesApp from './PlacesApp';

const APPS_BY_NAME = { PeopleApp, PlacesApp };

class App extends Component {
 render() {
    return (
      // ...
      <Container App={APPS_BY_NAME[this.state.currentApp]}/>
      // ...
    );
  }
}

从“/PeopleApp”导入PeopleApp；
从“/PlacesApp”导入PlacesApp；
const APPS_BY_NAME={PeopleApp，PlacesApp}；
类应用程序扩展组件{
render（）{
返回(
// ...
// ...
);
}
}

好的，你的回答指引了我正确的方向！！！简短的版本是，它似乎不喜欢这是一个字符串被传入的事实。我的解决方案是将MyApp的导入移动到App.js模块，然后将应用列表传递到菜单中。onMenuChange现在传递的是与该项关联的类，而不是它的名称。好的，你的答案引导我朝着正确的方向前进！！！简短的版本是，它似乎不喜欢这是一个字符串被传入的事实。我的解决方案是将MyApp的导入移动到App.js模块，然后将应用列表传递到菜单中。onMenuChange现在传递与该项关联的类，而不是它的名称。接受作为答案，因为它准确地描述了我必须做什么才能使其工作。接受作为答案，因为它准确地描述了我必须做什么才能使其工作。

import PeopleApp from './PeopleApp';
import PlacesApp from './PlacesApp';

const APPS_BY_NAME = { PeopleApp, PlacesApp };

class App extends Component {
 render() {
    return (
      // ...
      <Container App={APPS_BY_NAME[this.state.currentApp]}/>
      // ...
    );
  }
}