要创建一个HTML/JavaScript元素,当点击它时,在React.js中显示一个不同的元素,可以按照以下步骤进行:
<button id="myButton">点击我</button>
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
showDifferentElement: false
};
}
handleClick = () => {
this.setState(prevState => ({
showDifferentElement: !prevState.showDifferentElement
}));
}
render() {
return (
<div>
<button onClick={this.handleClick}>点击我</button>
{this.state.showDifferentElement && <div>不同的元素</div>}
</div>
);
}
}
ReactDOM.render(<MyComponent />, document.getElementById('myButton'));
ReactDOM.render(<MyComponent />, document.getElementById('myButton'));
这样,当单击HTML中的按钮时,它将在React.js中显示一个不同的元素。初始状态下,不同的元素是隐藏的,点击按钮后,它会切换显示和隐藏。你可以根据需要自定义不同的元素内容和样式。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云