无法让我的组件有条件地渲染出来

Question

我有几个不同的 const 函数想要返回和渲染。我将其设置为始终呈现主菜单，除非按下按钮，这会将我的状态更新为按钮的名称。每个按钮名称都有另一组应该渲染出来的按钮（就像主菜单一样），但我无法让它们渲染出来。

我的当前代码呈现主菜单，选择按钮而不是渲染新行按钮时，它只是只能选择所选按钮的名称。如果可能的话，我希望我的条件渲染出状态名称组件。

this.state.selected 只是渲染出一个字符串。我想把它装进去……

<this.state.selected />

但是，这不起作用。

return (
            <div>
                {this.state.selected === '' ? <MainMenu /> : this.state.selected }
            </div>
        )

编辑 - 添加所有代码以获取更多信息

import React, { Component } from 'react'
import SearchBar from 'material-ui-search-bar'
import sass from '../scss/application.scss'
import PropTypes from 'prop-types'
import RaisedButton from 'material-ui/RaisedButton'

class OverviewRender extends Component {
    constructor(props) {
         super(props);
         this.state = { 
             selected: ''
         }
       }

    handleClick(name) {
        this.setState({
            selected: name
        });
        console.log("testing" + this.state.selected);
    }

    render() {
        const MainMenu = () => (
            <div>
                <RaisedButton 
                    label="File Options"
                    onClick={this.handleClick.bind(this, 'FileOptions')}
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
                <RaisedButton 
                    label="Setup Options"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
                <RaisedButton 
                    label="More Options"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
                <RaisedButton 
                    label="Shift Setup"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                /> <br />
                <RaisedButton 
                    label="View/Report"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
                <RaisedButton 
                    label="Troubleshooting"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
            </div>
        );

        const FileOptions = () => (
            <div>
                <RaisedButton 
                    label="Load Values"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
                <RaisedButton 
                    label="Open Values From Disk"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
            </div>
        );

        const { Selected } = this.state;

        return (
            <div>
                {Selected === '' ? <MainMenu /> : <Selected />}
            </div>
        )
    }
}


class Overview extends Component {
    constructor(props){
            super(props)
                this.state = {
                    open: false
                }
            }

    render() {
        return (
            <div className="menuButtons">
                <br />
                <OverviewRender />
            </div>
        )
    }
}

export default Overview;

Answer 1

如果你能在你的代码中做到这一点，最好的方法

class Container extends React.Component {
  constructor () {
    super();
    this.state = { Selected: null }
  }
  render () {
    const { Selected } = this.state
    return (
        <div>
           {Selected === '' ? <MainMenu /> : <Selected /> }
        </div>
    )
  }
}

你必须知道 React 只有在遵循其约定名称时才会呈现。再看上面

编辑以反映上面更新的问题

import React, { Component } from 'react'
import SearchBar from 'material-ui-search-bar'
import sass from '../scss/application.scss'
import PropTypes from 'prop-types'
import RaisedButton from 'material-ui/RaisedButton'

const FileOptions = () => (
     <div>
        <RaisedButton label="Load Values" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
        <RaisedButton label="Open Values From Disk" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
     </div>
);

class OverviewRender extends Component {
    constructor(props) {
         super(props);
         this.state = { 
             Selected: null
         }
       }

    handleClick(name) {
        this.setState({
            Selected: name
        });
        console.log("testing" + this.state.Selected);
    }

    MainMenu = () => (
      <div>
         <RaisedButton label="File Options" onClick={() => this.setState({ Selected: FileOptions })} style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px' }} />
         <RaisedButton label="Setup Options" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
         <RaisedButton label="More Options" style={{height: '80px',width: '180px',fontSize: '44px',padding: '1px'}} />
         <RaisedButton label="Shift Setup" style={{height: '80px',width: '180px',fontSize: '44px',padding: '1px'}} />
         <br />
         <RaisedButton label="View/Report" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px' }} />
         <RaisedButton label="Troubleshooting" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
      </div>
    )

    render() {    
        const { Selected } = this.state;

        return (
            <div>
               {this.MainMenu()} 
               {Selected === '' ? <MainMenu /> : <Selected />}
            </div>
        )
    }
}

再次检查它的初始状态。

Answer 2

如果this.state.selected 是一个包含组件名称的字符串，那么我认为这应该可以：

let SelectedComponent = this.state.selected;
return <div>{SelectedComponent ? <SelectedComponent /> : <MainMenu />}</div>;

包含组件的变量名必须大写。欲了解更多信息，请参阅https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components