<title>父组件动态向子组件传参</title>
<style>
.ball {
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
margin: 1rem auto;
/* background-color: deeppink; */
transition: all 2s;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./libs/babel.min.js"></script>
<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script type="text/babel">
const { Component } = React;
class Ball extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div
style={{ backgroundColor: this.props.color }}
className="ball"
/>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
color: "yellowgreen",
};
}
changeColor(color) {
this.setState({
color,
});
}
// 当组件的state或者props改变之后会触发执行
// render()中的button里点击时也可以替换成bind绑定的那种写法,
render() {
console.count("父组件中的render方法执行了");
return (
<div className="app">
<button onClick={() => this.changeColor("red")}>红色</button>
<button onClick={() => this.changeColor("orange")}>橙色</button>
<button onClick={() => this.changeColor("green")}>绿色</button>
<button onClick={() => this.changeColor("blue")}>蓝色</button>
<Ball color={this.state.color} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
react--动态传递数据到子组件(点击颜色按钮让小球变色--demo)
最新推荐文章于 2024-07-04 20:21:08 发布