Question

当我尝试渲染我的react应用时，我的代码有问题，我无法摆脱它。我是初学者。我想创建一个简单的柜台，然后将其用作购物篮。你能帮助我吗？

http://localhost/portal_advseed/theme/app-assets/images/ico/apple-icon-120.png

类+ = this.props.counter.value === 0？ “ warning”：“ primary”;表单示例在此处显示 value 的问题。

Answer 1

尝试使用状态。

使用前初始化您的值。

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface CounterState {
    currentCount: number;
}

export class Counter extends React {
    constructor() {
        super();
        this.state = { currentCount: 0 };
    }

    public render() {
        return <div>
            <h1>Counter</h1>

            <p>This is a simple example of a React component.</p>

            <p>Current count: <strong>{ this.state.currentCount }</strong></p>

            <button onClick={ () => { this.incrementCounter() } }>Increment</button>
        </div>;
    }

    incrementCounter() {
        this.setState({
            currentCount: this.state.currentCount + 1
        });
    }
}

Answer 2

使用状态而非属性来对组件的状态建模。 This guide is very useful了解反应组件的状态。

使用此原则，我在下面创建了您的代码的有效示例。

class Counter extends React.Component {

  constructor(props) {
    super(props);
    this.state = {counter: 0};
  }

  incrementer(){
    return () => 
      {this.setState((state, props) => {
        state.counter = state.counter + 1;
        return state;
      })};
    
  }
  
  reseter(){
    return () => 
      this.setState({counter:0});
  }

  render() {
    return (
      <div>
        <div className={this.getBadgeClasses()}>{this.formatCount()}</div>
        <button
          className="btn btn-secondary btn-sm"
          onClick={this.incrementer()}
        >
          Increment
        </button>

        <button
          className="btn btn-danger btn-sm m-2"
          onClick={this.reseter()}
        >
          X
        </button>
      </div>
    );
  }
  getBadgeClasses() {
    let classes = 'badge m-2 badge-';
    classes += this.state.counter === 0 ? 'warning' : 'primary';
    return classes;
  }
  
  formatCount() {
    return this.state.counter === 0 ? 'Zero' : 
      this.state.counter;
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/cerulean/bootstrap.min.css" rel="stylesheet"/>

<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>

Answer 3

基于代码笔https://codepen.io/medamis/pen/GwWMqG，您传递的是value={counter.value}而不是counter={counter}。

此外，我进行了一些更改，因此您的代码可以正常工作，并创建了DEMO

此外，我对您的代码也有一些建议：

如果可以将其定义为类方法，请避免内联创建函数。
如有必要，使用吸气剂和setters

Answer 4

基于此pen，您似乎没有向counter组件传递任何<Counter/>道具

REACT TypeError：无法读取未定义的属性“值”

4 个答案: