Question

所以我想基于＆＃39; this.props.x＆＃39;来创建和渲染一个JSX元素，其中这个＆＃39; this.props.x＆＃39;是从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>
        );
    }
};

＆＃39;页面＆＃39; element是父jsx文件传递的prop be。上面的代码不起作用，但也没有给我一个错误，所以我感觉我接近所需的解决方案。

谢谢：）

（UPDATE）回顾它，我意识到我实际上正在寻找的是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 />
}

您无法拥有动态内联组件名称，有关详细信息，请参阅this question。

如何动态创建和呈现JSX元素，这些元素是使用react.props定义的

2 个答案: