组件未呈现按钮

Question

我正在尝试渲染几个按钮，但由于某种原因没有任何反应。我不确定我的错误在哪里。我有一个 OverviewRender 类，它最终将处理要呈现的不同按钮集，以及一个调用 OverviewRender 来呈现按钮的 Overview 类。

感觉应该可以工作，但按钮没有呈现。如果我移动概览返回函数中的按钮，我可以看到它们。

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 {
    render() {
        const mainMenu = () => {
            return (
                <div>
                    <RaisedButton label="File Options" 
                        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'}}
                            /> 
                </div>
            )
        }       
        return (
            <div>
                {mainMenu}
            </div>
        )
    }
}


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

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

export default Overview;

Answer 1

用户定义的组件必须大写

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在 JSX 中使用之前将其分配给大写变量。

只需将 mainMenu 重命名为 MainMenu 即可。

查看文档：component must be capitalized

class OverviewRender extends React.Component {
    render() {
        const MainMenu =  ({name}) => (
                <div>
                    <button label="File Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            /> 
                    <button label="Setup Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            />
                    <button label="More Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            /> 
                </div>
        );

        return (
            <div>
                <MainMenu/>
            </div>
        )
    }
}

ReactDOM.render( < OverviewRender / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

这是因为您创建了一个函数mainMenu 来创建您的按钮，但您从未调用它。

两种选择：

1.将mainMenu的返回内容直接移动到div中：

class OverviewRender extends Component {
    render() {     
        return (
            <div>
                <RaisedButton 
                    label="File Options"
                    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'
                    }}
                />
            </div>
        )
    }
}

2. 将mainMenu 移出组件，使其成为功能组件，这看起来就像您要实现的目标。然后你必须像使用任何其他组件一样使用它：<MainMenu />:

class OverviewRender extends Component {
    render() {     
        return <MainMenu />
    }
}

const MainMenu = () => (
    <div>
        <RaisedButton 
            label="File Options"
            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'
            }}
        />
    </div>
);