Component won't render in react

问题

Following is my code:

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;

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.

Kindly help me with this.

回答1:

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.

Try changing buttonGroup to ButtonGroup and check it.

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} />

回答2:

You must define your component with a name in Title case. Like, ButtonGroup instead of buttonGroup.
The possible error that is actually resisting you to execute the code is the use of that component in the app component, is the missing space in between the the Component Name and the slash ending the component.

You must write it like: <ButtonGroup /> or <ButtonGroup> </ButtonGroup>

Following is the complete code running:

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;

Also in your custom component ButtonGroup defination, you are using countClick() which is undefined yet. After your concern of rendering, if you want to use App component's countClick(), you must do this.props.countClick and pass it to ButtonGroup as a prop like <ButtonGroup countClick = {this.props.countClick} /> [the complete code above is just resolving your issue with rendering] This prop thing is dependent on your implementation.

来源：https://stackoverflow.com/questions/48838937/component-wont-render-in-react

标签

reactjs

components

render

jsx