Flask接口签名sign原理与实例代码浅析
240
2023-04-19
详解react使用react
详解react使用react
上一篇我们谈了谈如何配置react的webpack环境
react入门之搭配环境（一）
可能很多人已经打开过官方文档学习了react的基础知识
不管有没有，在介绍react之前，我想先介绍一下react-bootstrap
先懂得使用别人造的轮子，就能更快成为老司机。
好的，源代码奉上：
git clone https://github.com/lingjiawen/react_bootstrap_demo.git
cd react_bootstrap_demo
npm install
npm run dev
打开浏览器输入：localhost:8080
react-bootstrap官方网址
现在就让我们来看看它能干什么吧！
一、Button
使用Button声明一个按钮，bsSize有如下四个属性，可以分别有大、中、小、超小四种大小的按钮，再用ButtonToolbar包裹起来
使用效果如下：
使用well将按钮包裹起来，可以实现如下效果：（well在后面介绍）
使用 bsStyle属性可以调整按钮的状态颜色：
下图bsStyle属性分别为：info、warning、danger、link
使用按钮实现点击loading，等待结果的功能：
点击之后会变为loading...，可以自己点击一下
class LoadingButton extends React.Component{
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = { isLoading: false }
}
handleClick() {
this.setState({isLoading: true});
// This probably where you would have an `ajax` call
setTimeout(() => {
// Completed of async action, set loading state back
this.setState({isLoading: false});
}, 2000);
}
render() {
let isLoading = this.state.isLoading;
return (
bsStyle="primary"
disabled={isLoading}
onClick={!isLoading ? this.handleClick : null}>
{isLoading ? 'Loading...' : 'Loading state'}
);
}
}
实现按钮的下拉和上拉：
在title中使用Dropdown属性，用DropdownButton包裹下拉,使用Dropup为上拉
//下拉
//上拉
二、List
简单列表：
使用ListGroup包裹， ListGroupItem就是它的子元素
active：已选中
disable：可以取消它的点击事件
表格：
# First Name Last Name Username
可以点击隐藏的面板：
class CollapsiblePanel extends React.Component {
constructor(props) {
super(props);
this.state = {
open: true
};
}
render() {
return (
点我隐藏/显示
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
);
}
}
三、Overlays
点击弹出的窗口：
class StaticMarkup extends React.Component {
constructor(props) {
super(props);
this.state = {dpName:false};
this.onDisplayOverlays = this.onDisplayOverlays.bind(this);
this.onCloseOverlays = this.onCloseOverlays.bind(this);
}
onDisplayOverlays() {
this.setState({
dpName:true
});
}
onCloseOverlays() {
this.setState({
dpName:false
});
}
render() {
if(this.state.dpName)
return (
bsStyle="primary"
onClick={this.onDisplayOverlays}>
弹出框
One fine body...
);
else
return (
bsStyle="primary"
onClick={this.onDisplayOverlays}>
弹出框
);
}
}
以及点击显示、隐藏的overload
class CustomOverlays extends React.Component{
constructor(props) {
super(props);
this.state = {show: true};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({ show: !this.state.show });
}
render() {
const sharedProps = {
show: this.state.show,
container: this,
target: () => ReactDOM.findDOMNode(this.refs.target)
};
return (
Click me!
);
}
}
四、轮播
class CarouselInstance extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
Nulla vitae elit libero, a pharetra augue mollis interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
);
}
}
五、一些有用的图标
class MiscellaneousInstance extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
Label
);
}
}
六、表单
表单基础的类函数为：
function FieldGroup({ id, label, help, props }) {
return (
{help &&
);
}
然后使用FieldGroup包裹：
id="formControlsText" type="text" label="Text" placeholder="Enter text" /> 便可以轻松实现表单！如果你对react有了解，便知道原生的表单是不能直接用的。这个组件简化了许多，但我没用实际用过，所以不知道效果如何。 我写的这些只是抛砖引玉，只是希望大家稍微了解到react-bootstrap大概能做的事 更详细的方法和属性请进入官方网址浏览文档，打开源代码自行研究 有些官方demo没有给完全，可以运行前面的我给的demo，再查看源代码理解（不过我也没有写全，而且结构比较乱）
id="formControlsText"
type="text"
label="Text"
placeholder="Enter text"
/>
便可以轻松实现表单！如果你对react有了解，便知道原生的表单是不能直接用的。这个组件简化了许多，但我没用实际用过，所以不知道效果如何。
我写的这些只是抛砖引玉，只是希望大家稍微了解到react-bootstrap大概能做的事
更详细的方法和属性请进入官方网址浏览文档，打开源代码自行研究
有些官方demo没有给完全，可以运行前面的我给的demo，再查看源代码理解（不过我也没有写全，而且结构比较乱）
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~