Question

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

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

this.state.selected只呈现一个String。我想在其中加入......

<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

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

2 个答案: