Question

在名为app.jsx的文件中，我从“ atividades”组件中进行了一次导入：

import React from 'react'

import { Container } from 'semantic-ui-react'
import atividades from '../atividades/atividades'

export default props => (
    <Container>
        <h1>Teste</h1> 

        <atividades />

    </Container>
)

但是只有h1正在渲染...

这是我的杀螨纲：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { Form } from 'semantic-ui-react'
import { addWorkout, searchWorkout } from './workOutActions'
import { Button, Icon } from 'semantic-ui-react'

const workoutOptions = [
    { text: 'correr', value: 'run' },
    { text: 'nadar', value: 'swimming' },
    { text: 'andar de bicicleta', value: 'bike' },
]

class atividades extends Component {

    constructor(props){
        super(props)
    }

    componentWillMount(){
        this.props.searchWorkout()
    }

    render() {

        const { addWorkout, searchWorkout, tempoGasto, tipoTarefa, data} = this.props
        return (
            <div role='form'>
                <h6>Inserir atividade</h6>
                <Form>
                    <Form.Group widths='equal'>
                        <Form.Input fluid placeholder='Tempo gasto' />
                        <Form.Select
                            fluid
                            label='Atividade'
                            options={workoutOptions}
                        />

                        <Button animated='vertical'>
                            <Button.Content hidden>Shop</Button.Content>
                            <Button.Content visible>
                                <Icon name='shop' />
                            </Button.Content>
                        </Button>

                    </Form.Group>
                </Form>
            </div>
        )
    }
}

const mapStateToProps = state => ({tempoGasto: state.workout.tempoGasto, tipoTarefa: state.workout.tipoTarefa, data: state.workout.data})
const mapDispatchToProps = dispatch => 
    bindActionCreators({ addWorkout, searchWorkout }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(atividades)

控制台中未显示任何内容，但元素锻炼未呈现，Visual Studio代码显示未使用导入。

Answer 1

React组件的首字母必须大写，或者认为它是div或p或span等内置组件。

此链接具有更多信息： ReactJS component names must begin with capital letters?

元素未在React中呈现

1 个答案: