react_demo/box/src/components/box.jsx

import React, { Component } from 'react';


class Box extends Component {
    
    btn_1_style = {
        margin: "10px 20px 0px 0px",
    }

    btn_2_style = {
        margin: "10px 0px 0px 0px",
    }

    btn_3_style = {
        margin: "10px 0px 0px 20px",
    }



    getStyle() {
        let styles = {
            width: 100,
            height: 100,
            backgroundColor: "lightblue",
            textAlign: "center",
            lineHeight: "100px",
            fontSize: "20px",
            color: "red",
            marginTop: "10px",
            marginLeft: this.props.box.x,
            borderRadius: "5px",
        };

        if (this.props.box.x % 2 === 0) {
            styles.backgroundColor = "orange";
            styles.color = "black";
        }
        return styles;
    }


    render() { 
        console.log(this.props); // 打印接受到的数据
        return (         
        <React.Fragment>
            <div style={this.getStyle()}>{this.toString()}</div>
            <button onClick={() => this.props.onLeft(this.props.box,5)} className='btn btn-success sm' style={this.btn_1_style}>Left</button>
            <button onClick={() => this.props.onRight(this.props.box,5)}  className='btn btn-info sm' style={this.btn_2_style}>Right</button>
            {/* 调用父元素中的函数 */}
            <button onClick={() => this.props.onDelete(this.props.box.id)}  className='btn btn-danger sm' style={this.btn_3_style}>Delete</button>
        </React.Fragment>);
    }
    
    toString() {
        return `x: ${this.props.box.x}\n`;
    }   
}
 
export default Box;