diff --git a/box/src/components/app.jsx b/box/src/components/app.jsx new file mode 100644 index 0000000..ec3e868 --- /dev/null +++ b/box/src/components/app.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import NavBar from './navbar'; +import Boxes from './boxes'; + +class App extends Component { + + render() { + return ( + + +
+ +
+ + ); + } +} + +export default App; \ No newline at end of file diff --git a/box/src/components/box.jsx b/box/src/components/box.jsx index 4865e51..eb20ac7 100644 --- a/box/src/components/box.jsx +++ b/box/src/components/box.jsx @@ -2,56 +2,36 @@ import React, { Component } from 'react'; class Box extends Component { - state = { - x: 1, - width: 500, - height: 500, - }; - - - + btn_1_style = { - margin: "20px 20px 0px 150px", + margin: "10px 20px 0px 0px", } btn_2_style = { - margin: "20px 0px 0px 0px", + margin: "10px 0px 0px 0px", } - - handleClickLeft = (step) => { - this.setState({ - x: this.state.x - step, - width: this.state.width - 50, - height: this.state.height - 50, - }); - - console.log(step,this.state.width,this.state.height); + btn_3_style = { + margin: "10px 0px 0px 20px", } - handleClickRight = (step) => { - this.setState({ - x: this.state.x + step, - width: this.state.width + 50, - height: this.state.height + 50, - }); - - console.log(step,this.state.width,this.state.height); - } getStyle() { let styles = { - width: this.state.width, - height: this.state.height, + width: 100, + height: 100, backgroundColor: "lightblue", textAlign: "center", - lineHeight: this.state.height + "px", + lineHeight: "100px", fontSize: "20px", color: "red", + marginTop: "10px", + marginLeft: this.props.box.x, + borderRadius: "5px", }; - if (this.state.x % 2 === 0) { + if (this.props.box.x % 2 === 0) { styles.backgroundColor = "orange"; styles.color = "black"; } @@ -60,16 +40,19 @@ class Box extends Component { render() { - return ( + console.log(this.props); // 打印接受到的数据 + return (
{this.toString()}
- - + + + {/* 调用父元素中的函数 */} + ); } toString() { - return `x: ${this.state.x}\n width: ${this.state.width}\n height: ${this.state.height}`; + return `x: ${this.props.box.x}\n`; } } diff --git a/box/src/components/boxes.jsx b/box/src/components/boxes.jsx new file mode 100644 index 0000000..d3522ae --- /dev/null +++ b/box/src/components/boxes.jsx @@ -0,0 +1,68 @@ +import React, { Component } from 'react'; +import Box from './box'; +// Boxes: 父组件 Box: 子组件 +class Boxes extends Component { + state = { + boxes: [ + {id: 1, x: 1}, + {id: 2, x: 2}, + {id: 3, x: 3}, + {id: 4, x: 4}, + ] + } + + // 每个组件的state只能在该组件内访问！！！！ + handleDelete = (BoxId) => { + // 保留所有id不同于BoxId的元素 + const boxes = this.state.boxes.filter(box => box.id !== BoxId); + this.setState({boxes: boxes}); + + } + + handleReset = () => { + const boxes = this.state.boxes.map(box => { + return { + id: box.id, + x: box.id, + } + }); + + this.setState({boxes:boxes}); + } + + + handleClickLeft = (box,step) => { + const boxes = [...this.state.boxes]; // 浅拷贝 + const k = boxes.indexOf(box); // box对应的index + boxes[k].x = Math.max(0,boxes[k].x - step);// 修改state中的x值 + this.setState({boxes}); + + } + + handleClickRight = (box,step) => { + const boxes = [...this.state.boxes]; // 浅拷贝 + const k = boxes.indexOf(box); // box对应的index + boxes[k].x = Math.min(1000,boxes[k].x + step); // 修改state中的x值 + this.setState({boxes}); + } + + render() { + // 父元素给子元素传递数据 + return ( + + + {this.state.boxes.map(box => ( + + + ))} + + ); + } +} + +export default Boxes; \ No newline at end of file diff --git a/box/src/components/navbar.jsx b/box/src/components/navbar.jsx new file mode 100644 index 0000000..d3fb17b --- /dev/null +++ b/box/src/components/navbar.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +class NavBar extends Component { + state = { } + render() { + return ( + + + + + ); + } +} + +export default NavBar; \ No newline at end of file diff --git a/box/src/index.js b/box/src/index.js index c35f787..1f485c1 100644 --- a/box/src/index.js +++ b/box/src/index.js @@ -1,12 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import Box from './components/box'; import "bootstrap/dist/css/bootstrap.css" +import App from './components/app'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + ); diff --git a/solutions/src/components/solutions.jsx b/solutions/src/components/solutions.jsx index e99b60c..ffc3ba0 100644 --- a/solutions/src/components/solutions.jsx +++ b/solutions/src/components/solutions.jsx @@ -42,8 +42,8 @@ class Solutions extends Component { if (this.state.solutions.length === 0) { return (
-