组件不会在反应中呈现 [英] Component won't render in react

问题描述

以下是我的代码:

import React, { Component } from 'react';
import './App.css';

class buttonGroup extends Component{
  render(){
    return (<button onClick={this.countClick}>Count it up</button>);
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message:"state from constructor",
      counter: 1
    };
    this.handleClick = this.handleClick.bind(this);
    this.countClick = this.countClick.bind(this);
  }

  handleClick(e) {
    this.setState( () => ({message:"state from click handler"}) )
  }

  countClick(e) {
    this.setState( (prev, props) => ({counter: (prev.counter + 1)}))  
  }

  render() {
    return (
      <div>
        <div>
          <h1>{this.state.message}</h1>
          <h1>{this.state.counter}</h1>
        </div>
        <button onClick={this.handleClick}>Change it up</button>
        <buttonGroup/> 
      </div>
    );
  }
}



export default App;

我知道这可能是显而易见的，但是我似乎无法在"buttonGroup"中获取"count up"按钮来呈现.我尝试添加括号，将其拿走，重新排列所有内容.

I know that it is probably something glaringly obvious but I don't seem to be able to get the "count it up" button inside of "buttonGroup" to render. I've tried adding brackets, taking them away, reordering everything.

请帮助我.

推荐答案

自定义组件应始终以大写字母(Pascal大小写)开头.所有以小写字母开头的组件都将被视为react的内置组件，而不是用户定义的或自定义的组件.

Custom components should always start with a capital letter(Pascal case). All components starting with small letter will be treated as react's built-in components rather than user defined or Custom ones.

尝试将buttonGroup更改为ButtonGroup并进行检查.

Try changing buttonGroup to ButtonGroup and check it.

也在buttonGroup类中，您使用的是未定义的countClick方法.如果您想使用App组件的countClick方法，则可能应该执行this.props.countClick并将其作为<ButtonGroup countClick = {this.countClick} />

Also in buttonGroup class, you are using a countClick method which is not defined. If you are looking to use App components countClick method, you should probably do this.props.countClick and pass it to ButtonGroup as a prop like <ButtonGroup countClick = {this.countClick} />

这篇关于组件不会在反应中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！