组件不会在反应中呈现

Posted 2023-02-23

【中文标题】组件不会在反应中呈现

【英文标题】：Component won't render in react

【发布时间】：2018-07-28 01:56:27

【问题描述】：

以下是我的代码：

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 it up”按钮进行渲染。我尝试过添加括号、删除它们、重新排序所有内容。

请帮我解决这个问题。

【问题讨论】：

如果它帮助您解决问题，请接受答案。或者，您可以询问任何查询以防万一。 :)

【参考方案1】：

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

尝试将 buttonGroup 更改为 ButtonGroup 并检查它。

同样在 buttonGroup 类中，您正在使用未定义的 countClick 方法。如果您希望使用 App 组件的 countClick 方法，您可能应该执行 this.props.countClick 并将其作为道具传递给 ButtonGroup，例如 <ButtonGroup countClick = this.countClick />

【参考方案2】：

您必须使用标题大小写的名称定义组件。喜欢， ButtonGroup 而不是 buttonGroup。 实际上阻止您执行的可能错误 code 是该组件在应用组件中的使用，是组件名称和结束组件的斜线之间缺少的空格。

你必须这样写： <ButtonGroup /> 要么 <ButtonGroup> </ButtonGroup>

以下是运行的完整代码：

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 定义中，您正在使用尚未定义的 countClick()。在你关心渲染之后，如果你想使用App组件的countClick()，你必须做this.props.countClick并将它作为<ButtonGroup countClick = this.props.countClick />这样的prop传递给ButtonGroup[上面的完整代码只是解决你的渲染问题]这个prop事情取决于您的实施。