如何动态创建和呈现 JSX 元素，从 this.props 定义并做出反应

Question

所以我想创建并渲染一个基于 'this.props.x' 的 JSX 元素，其中 'this.props.x' 是从 app.jsx.

传递下来的状态

我确实有一个工作正常的解决方法，但它真的很难看！这就是为什么我正在寻找一种更优雅的方式来做到这一点。

所以我现在的做法是 if/else 像这样：

import React from 'react'

import Team from './inMenuTeam.jsx';
import News from './inMenuNews.jsx';

export default class GameArea extends React.Component{
    GameStage(page){
        if(page == 'News'){
            return <News />
        }
        else{
            return <Team />
        }
    }
    render(){
        return( 
            <div>
                {this.GameStage(this.props.newStage)}
            </div>
        );
    }
};

我想做的是这样的：

export default class GameArea extends React.Component{
    GameStage(page){
        return <page />
    }
    render(){
        return( 
            <div>
                <GameMenuLeft handleMenuClick={this.props.handleMenuClick.bind(this)} />
                {this.GameStage(this.props.newGameAreaStage)}
            </div>
        );
    }
};

其中 'page' 元素是父 jsx 文件传递的 prop。上面的代码不起作用，但也没有给我提供错误，所以我觉得我已经接近所需的解决方案了。

谢谢:)

（更新）回想起来，我意识到我实际上在寻找的是 react-router

Answer 1

要获得更优雅的代码，您可以使用 ternary operator:

export default class GameArea extends React.Component {
  render() {
    return (
      <div>
      {
        this.props.newStage === 'News' ? <News/> : <Team/>
      } 
      </div>
    );
  }
};

Answer 2

没有page组件。类似的方法是：

const pages = {
  News: News,
  Team: Team,
}; // this could also be shorthanded as const pages = { News, Team };

GameStage(page){
  const Page = pages[page];
  return <Page />
}

您不能使用动态内联组件名称，有关详细信息，请参阅。

Answer 3

您可以创建 React 元素 manually from the component:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

如何动态创建和呈现 JSX 元素，从 this.props 定义并做出反应

How to dynamically create and render JSX elements, defined from this.props with react

jsx

reactjs