时间戳

首页 > 解决方案 > jsfiddle 中的 React 代码问题。帮帮我

javascript - jsfiddle 中的 React 代码问题。帮帮我

问题描述

我只是在反应中编写此代码的初学者。我认为代码还可以。否则改变它。 

import ReactDOM from 'react-dom';
import React, { Component, PropTypes } from 'react';

都是进口的。。

class Calcul extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
            number1: 0,
            number2: 0,
            total: 0
        };
        this.add= this.add.bind(this);
        this.sub= this.sub.bind(this);
    }

绑定也完成了。

并单独制作功能

add(){
    a+b javascript code    
}

sub(){
    a-b js code    
}

渲染并调用里面的add函数。

  render() {
    return (
    <div class="calle-add">
     <button onClick={this.add.bind(this)}>Click me 

      {this.add()}      
      </div>
   )
  }
}
ReactDOM.render(<Calcul />, document.getElementById("#app"))

这是在 jsfiddle react 中编写代码的正确方法吗？并且可以 v 划分代码 html 不同并且反应代码不同

标签： javascriptreactjs

解决方案

首先，</button>您的渲染方法中需要一个结束标签。其次，你不应该{this.add()}在你的内部显示<div>，这实际上是一派胡言。

毕竟，你render应该是这样的：

  render() {
    return (
    <div class="calle-add">
     <button onClick={this.add.bind(this)}>Click me</button>
     <p>SOme additional text you might want to output<p> 
    </div>
   );
  }
}

定位 div 也应该在没有#符号的情况下完成，像这样 ReactDOM.render(<Calcul />, document.getElementById("app"))

此外，React 不再需要constructor设置初始状态，现在可以如下完成。您也可以在第二行导入时替换为React.Component：ComponentComponent

class Calcul extends Component {
  state = {
    number1: 0,
    number2: 0,
    total: 0,
  }
}

您还可以通过将方法创建为箭头函数来避免所有令人困惑的绑定

add = () => {your js code}
sub = () => {your js code}

然后你的按钮看起来像 <button onClick={this.add}>Click me</button>

推荐阅读