小编Cha*_*wda的帖子

根据React Docs,我们可以通过两种方式使用对象语法的setState和其他具有如下所示的函数的方法

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

我对箭头函数语法的理解就像() => {}箭头后面的花括号一样=>,但根据样本,它是圆括号而不是花括号

这些语法()=>{}和之间有什么区别()=>({}).

根据this.setStage(prevStage=>({}))在handleClick函数中使用语法时工作的文档尝试示例代码,如果将其更改为它,this.setState(prevStage=>{})则不会切换按钮值.

以下是工作代码:

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn : true
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
          }));
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? 'ON' : "OFF"}
                </button>
            </div>
        );
    }
}

我有两个不同高度的画布元素，并且arc使用相同的参数 (x,y,r,start,end) 调用arc(150,75,40,0,2*Math.PI)。

一个绘制Eclipse，另一个绘制Circle。画布高度如何影响圆弧的形状？

您可以在JSFiddle 中查看示例

HTML：

<div id="one">
  <canvas id='one-canv'></canvas>
</div>
<div id="two">
  <canvas id='two-canv'></canvas>
</div>

CSS：

#one-canv{
  height:200px;
  width:200px;
  background-color:#FFFFBF;
}
#two-canv{
  height:100px;
  width:200px;
  background-color:#a3F77F;
}

Javascript：

var x = document.getElementById('one-canv');
var x_cont = x.getContext('2d');
x_cont.beginPath();
x_cont.arc(150,75,40,0,2*Math.PI);
x_cont.stroke();

var y = document.getElementById('two-canv');
var y_cont = y.getContext('2d');
y_cont.beginPath();
y_cont.arc(150,75,40,0,2*Math.PI);
y_cont.stroke();