antdTree获取当前节点以及所有上级⽗节点的id
项⽬需求：⼀个产品树，当点击⼀个节点的时候获取当前节点以及所有⽗级节点的id，并调⽤兄弟组件(form组件)的⽅法进⾏查询操作，查询的结果需要渲染在table组件中。
1.⾸先明确这个页⾯的组件结构，是由 Tree、Form、Table组件组成。
// index.js ⽗组件
<Card bordered={false} title="商品SPU列表" className={style.antCardBox}>
<div className={style.antTreeBox}>
<OrderTree/>
</div>
<div style={{ flex: '1' }}>
<OrderForm />
<OrderTable />
</div>
</Card>
来看下页⾯渲染结果，使⽤flex布局，左边Tree组件宽度固定，右边⾃适应剩余空间。同时Tree中节点⽂字过长会省略号...展⽰，并且⿏标悬浮提⽰全部内容。
css布局左边固定右边自适应
css样式：
.antCardBox {
:global {
.ant-card-body {
display: flex !important;
}
}
}
.antTreeBox {
width: 250px;
margin-right: 30px;
box-shadow: 3px -3px 6px 0px #ccc6;
:global {
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
background-color: #50d38c !important;
color: white;
}
.ant-tree.ant-tree-icon-hide {
max-height: 900px !important;
overflow: auto !important;
}
.ant-tree-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width: 170px;
}
.ant-spin.ant-spin-spinning {
margin-top: 30%;
}
}
}
2.明确要解决的问题有以下2个：
如何在点击树节点的时候获取当前节点以及所有⽗级节点的id？
Tree组件获取到id后如何执⾏Form组件中的查询⽅法？
如何在点击树节点的时候获取当前节点以及所有⽗级节点的id？
解决⽅法：就是对从后台获取的数据进⾏递归遍历获取所需要的key和value。
let keysObj = {}; // 当前节点以及所有⽗节点的id
const intetorFun = (data, key, string) => {
if (string) {
firstParentKey = {
[data.param]: data.paramId,
};
}
if (data.children && data.children.length !== 0) {
data.children.forEach(item => {
if (item.id === key[0]) {
keysObj = {
[data.param]: data.paramId,
[item.param]: item.paramId,
...firstParentKey,
};
} else {
intetorFun(item, key);
}
});
}
return keysObj;
};
const getParentKey = (key, treeData) => {
let parentKey = [];
for (let i = 0; i < treeData.length; i++) {
const node = treeData[i];
// ‘firstTime’是设置的⼀个标记，根据这个标记把⼀级⽗节点的id记录在firstParentKey中
parentKey = intetorFun(node, key, 'firstTime');
}
return parentKey;
};
Tree组件获取到id后如何执⾏Form组件中的查询⽅法？
调⽤Form组件的查询⽅法需要在他们的⽗组件中进⾏操作，要在⽗组件中获取Tree和Form组件的实例，通过实例调⽤⽅法。
// index.js ⽗组件
onRef = ref => {
};
treeRef = ref => {
};
getIdObject = data => {
this.setState({idObject: data},() => {
// 在Form组件中根据点击的树节点id，回填类型下拉选择框
categoryIds: [String(data.categoryId)],
});
// 调⽤Form组件的查询⽅法
});
};
<Card bordered={false} title="商品SPU列表" className={style.antCardBox}>
<div className={style.antTreeBox}>
<OrderTree idObject={IdObject} treeRef={Ref} />
</div>
<div style={{ flex: '1' }}>
<OrderForm onRef={Ref} isReact={this.isReact} />
<OrderTable />
</div>
</Card>
// 在Tree和Form组件中在componentDidMount⽣命周期中把⾃⼰传给⽗组件
// Tree组件中
componentDidMount() {
Ref && Ref(this);
}
// 在点击树节点的时候
//点击树节点时触发
onSelect = (selectKeys, e) => {
const { dispatch } = this.props;
const {
commodity: { treeData },
} = this.props;
this.setState({
selectedKeys: selectKeys,
});
let arrKeys = {};
//只有节点选中了才执⾏代码
if (e.selected && e.node.props.dataRef.param !== 'categoryId') {
keysObj = {};
firstParentKey = {};
arrKeys = getParentKey(selectKeys, treeData);
} else if (e.selected && e.node.props.dataRef.param === 'categoryId') { //点击的是⼀级根节点      keysObj = {};
firstParentKey = {};
arrKeys = {
categoryId: e.node.props.dataRef.paramId,
};
} else if (!e.selected) {
this.setState({
selectedKeys: [],
});
return false;
}
this.props.idObject(arrKeys); // 将获取到的所有⽗级id传给⽗组件
};
// Form组件中
componentDidMount() {
Ref && Ref(this);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。