在React.js中向组件添加多个形状？

Question

I'm currently trying to do two things: 1. add multiple shapes to a React class 2. have one "selected" shape that will change color when selected.

I don't think I'm going about this in the right way. First of all, I'm currently adding all the shapes to a canvas using a bunch of calls to fillRect , but that doesn't seem to fit the general React flow. Also, for now I'm just trying to hard code the state to be equal to one rectangle and then render that shape as a different color, but it's currently not even appearing on the screen (see screenshot).

I would appreciate any advice with these two issues!

Relevant code:

class Shapes extends React.Component {

getInitialState() {
    var highlightedShape = {x:200, y:200, width:60, height:40};
    highlightedShape.width = 70;
}

componentDidMount() {
    this.updateCanvas();
}

updateCanvas() {
    const ctx = this.refs.canvas.getContext('2d');
    ctx.fillRect(0,0, 100, 100);
    ctx.fillRect(70,70,90,90);
    //my attempt at 'highlighting' the state's selected shape:
    ctx.fillStyle="red";
    ctx.fillRect(this.state.highlightedShape.x, this.state.highlightedShape.y, this.state.highlightedShape.width, this.state.highlightedShape.height);

}
render() {
    return (
        <canvas ref="canvas" width={300} height={300}/>
    );
  }
}

module.exports = Shapes

Current output (selected shape doesn't even appear):

Answer 1

You need to return your initial state. Right now, your getInitialState call returns undefined , since you don't have a return statement. This means that in your updateCanvas() call, this.state.highlightedShape will be undefined (you should be getting errors in your console as well).

Something like this:

getInitialState() {
    var highlightedShape = {x:200, y:200, width:60, height:40};
    highlightedShape.width = 70;
    return { highlightedShape: highlightedShape };
}

Answer 2

Are you set on using canvas? One alternative is to use svg which fits React better because it is DOM..y.

https://jsfiddle.net/508n6skz/

var Shapes = React.createClass({
  render: function() {
    return (
    <svg width="500" height="500">
        <Rectangle x="10" y="10" width="100" height="200"></Rectangle>              
      <Rectangle x="20" y="30" width="50" height="100" selected="true"></Rectangle>
    </svg>);
  }
});

var Rectangle = React.createClass({
    _getColor: function(){
    return this.props.selected? 'red': 'blue';
  },
    render: function(){
    return (
    <rect fill={this._getColor()} x={this.props.x} y={this.props.y}
    width={this.props.width} height={this.props.height}></rect>
    );
  }
})

ReactDOM.render(
  <Shapes />,
  document.getElementById('container')
);

Answer 3

By using canvas in react it will simple cases not use the normal update flow with the render functions, since canvas content isn't supported by the shadow dom diffing. To overcome this you need to tell react how to do the component update with componentDidUpdate :

class Shapes extends React.Component {

getInitialState() {

    var highlightedShape = {x:200, y:200, width:60, height:40};
    // Remember to return the state object
    return {highlightedShape: highlightedShape} 
}

componentDidMount() {
    this.updateCanvas();
}

componentDidUpdate() {
    this.updateCanvas();
}

updateCanvas() {
    const ctx = this.refs.canvas.getContext('2d');
    ctx.fillRect(0,0, 100, 100);
    ctx.fillRect(70,70,90,90);
    //my attempt at 'highlighting' the state's selected shape:
    ctx.fillStyle="red";
    ctx.fillRect(this.state.highlightedShape.x, this.state.highlightedShape.y, this.state.highlightedShape.width, this.state.highlightedShape.height);

}
render() {
    return (
        <canvas ref="canvas" width={300} height={300}/>
    );
  }
}

module.exports = Shapes

To update the content you could depend on properties like this:

class Shapes extends React.Component {

getInitialState() {
    var highlightedShape = {x:200, y:200, width: this.props.shapeWidth, height:40};
}

componentWillReceiveProps() {
    // it's important to create a new object on state properties, because the state diffing is done by reference.
    this.setState(Object.assign({}, this.state.highligtedShape, {this.props.shapeWidth}))
}

// ...

}

You can also take a look of pluggable canvas solutions like react-canvas , but they will bring you farther from the iron and not help you understand what's going on.