react使用html页面传递一个数字进入组件,并在存在的组件中实现加减乘除的功能
时间: 2024-05-07 09:15:19 浏览: 14
可以使用props来传递数字进入组件,然后在组件中使用state来保存这个数字,并且在组件中实现加减乘除的功能。
例如,我们可以创建一个名为Calculator的组件,接收一个名为num的props,然后在组件中使用state来保存这个数字,并在组件中实现加减乘除的功能。
```javascript
import React, { Component } from 'react';
class Calculator extends Component {
constructor(props) {
super(props);
this.state = {
num: props.num
};
}
add = () => {
this.setState({ num: this.state.num + 1 });
};
subtract = () => {
this.setState({ num: this.state.num - 1 });
};
multiply = () => {
this.setState({ num: this.state.num * 2 });
};
divide = () => {
this.setState({ num: this.state.num / 2 });
};
render() {
return (
<div>
<h1>{this.state.num}</h1>
<button onClick={this.add}>+</button>
<button onClick={this.subtract}>-</button>
<button onClick={this.multiply}>*</button>
<button onClick={this.divide}>/</button>
</div>
);
}
}
export default Calculator;
```
然后,我们可以在html页面中使用Calculator组件,并将一个数字传递给它:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Calculator</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
<script type="text/babel">
const num = 10;
ReactDOM.render(
<Calculator num={num} />,
document.getElementById('root')
);
</script>
</body>
</html>
```
这样,我们就可以在html页面中使用Calculator组件,并且实现加减乘除的功能。