组件不渲染按钮

Question

我正在尝试渲染一些按钮，但由于某种原因什么也没有发生。我不确定我的错误在哪里。我有一个 OverviewRender class，它最终将处理不同的按钮集来呈现，还有一个 Overview class，它调用 OverviewRender 来呈现按钮。

感觉应该可以正常工作，但按钮没有呈现。如果我移动概览 return 功能中的按钮，我可以看到它们。

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

用户定义的组件必须大写

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in 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.将mainMenureturn内容直接移动到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>
);

组件不渲染按钮

Component not rendering out buttons

components

render

reactjs

用户定义的组件必须大写