实际情况;
做一个面包屑的header,如图:
我的逻辑顺序:
父组件didMount用ajax异步获取后端数据====》setState到父组件的state中=====》用props传给子组件====》子组件使用state接受props中的数据====》子组件render的代码使用state的数据
上代码
父组件
componentDidMount() {
this.getNonPhysicalRejectReason();
}
async getNonPhysicalRejectReason() {
let TableUrl = UrlUtil.getConfigUrl('UI_API_GATEWAY_PROXY', 'CALC', 'BASICINFO') + this.state.CaseNo;
await AjaxUtil.call(TableUrl, null, { method: 'GET' }).then((data) => {
return this.setState(data);
})
}
render(){
.......
< AdvCascade isEnableSeachData={this.state.isEnableSeachData}
searchabled={this.state.searchabled}
option={this.state.Option}
optionsa={this.state.Optionsa}
ops='Ops'/>
........
}
子组件
export default class AdvCascade extends React.Component {
constructor(props) {
super(props);
this.state = {
isEnableSeachData: null,
searchabled: null,
optionsa: null,
option: null,
ops: null
};
}
// 外部传入的事件
handleCallback(e) {
const arr = (e.newValue.allVal).split('/');
if (arr.length == 1) {
console.log('1');
} else if (arr.length == 2) {
console.log('2');
} else if (arr.length == 3) {
console.log('3');
}
}
render() {
return (
<Fragment>
<UIAdvCascade ignorePageReadOnly="false" layout='horizontal' label="common" name="test" isEnableSeachData={this.state.isEnableSeachData}
searchabled={this.props.searchabled}
dataSource={this.props.optionsa}
handleEvent={this.handleCallback}
model={this.props.option}
property={this.props.ops}
/>
</Fragment>
);
}
}
总结:
- 注意一
props传递时,需要在子组件中直接使用props中的数据。
- 注意二
若是想使用子组件中state来管理状态,需要使用raect的钩子函数…(还没查明白,下次弥补)
留下的问题:
- 对于一个json,若何调用key的本身呢,如下:
//json
const data = {
'ops':'1223456'
}
//想要获取data的'ops'本身的字符串该如何操作呢
- 对于react的生命周期不熟悉,导致对于子组件的加载渲染数据不成功,没法解决。