react---简易展开收起组件
<p>组件核心代码：</p><div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import React from 'react';
// import PropTypes from 'prop-types';
// 展开收起组件
class ArrowSlide extends React.Component {
static defaultProps = {
itemLable: false, // 是否展开
itemsName: '' // 检查项目名称
};
constructor(props) {
super(props);
const { itemLable } = props; // 是否展开收起列表项
this.state = {
itemLable
};
}
/**
* 展开收起切换
* @memberof EleItem
*/
handleToggleCondition = () => {
const { itemLable } = this.state;
this.setState({ itemLable: !itemLable });
}
render() {
const { itemsName } = this.props;
const { itemLable } = this.state;
return (
<div style={{ marginTop: '10px' }}>
<a className="arrow-alide" onClick={this.handleToggleCondition}>
{itemsName}<i className={`iconfont ${itemLable ? 'icon-xiangxia2' : 'icon-xiangshang2'}`} />
</a>
<div style={{ transition: 'all .4s', maxHeight: itemLable ? '10000px' : '0px', overflow: 'hidden' }}>{this.props.children}</div>
</div>
);
}
}
export default ArrowSlide;
</pre>
</div>
<p> 组件调用：<span style="text-decoration: underline"><br></span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"> <ArrowSlide
itemsName={elem.exam_fee_name} // 检查项组名称
itemLable={index === 0} // 是否展开
key={i}
>
<TemplateBase
isNum={isNum}
form={form}
data={exam_pro_lists}
parentCode={elem.exam_pro_id}
onFieldValueChange={(e, field, code, id) => handleTemplateFieldsChange(e, field, code, id)}
>
{(exam_pro_lists || []).map(({ exam_code: code = 0 }) => {
const checkItem = TemplateBase.config;
const config = `${code}` === '326';
if (checkItem) {
return <checkItem.name
key={code}
code={code}
config={config}
/>;
}
return '';
})}
</TemplateBase>
</ArrowSlide>
</pre>
</div>
<p> 页面：</p>
<p><img src="https://img2018.cnblogs.com/blog/1338298/201908/1338298-20190801103746258-1899369797.png"></p>
<p>且默认第一项是展开的，代码控制：</p>
<p><img src="https://img2018.cnblogs.com/blog/1338298/201908/1338298-20190801103843511-1682343917.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/yxfboke/p/11281030.html
頁:
[1]