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

这是因为您创建了一个创建按钮的函数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>
);

Answer 2

用户定义的组件必须大写

我们建议使用大写字母命名组件。如果你有一个以小写字母开头的组件，在将它用于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>

组件没有渲染按钮

2 个答案:

用户定义的组件必须大写