写在前面
最近开始用Antdesign Pro写后台, 习惯了用vue, 一下子真的很难习惯过来~ 何况这框架还集成了umi/dva/redux/react… 一系列技术栈, 写起来真是有点头大~!
那就浅浅记录下使用过程中的一些point吧~
子组件向父组件传参
父组件 parent.js ↓
return (
<Page inner>
<div className={styles.editorWrap}>
// 和vue一样, 向子组件传入事件
<TextEditor onChangeText={onChangeText} className={styles.editor} />
</div>
</div>
</Page>
)
// 定义事件
const onChangeText = e => {
console.log(e.val,'获取从子组件事件中传过来的参数')
}
子组件 child.js ↓
import PropTypes from 'prop-types'
// 接收父组件传过来的方法 onChangeText
const TextEditor = ({
onChangeText, dispatch }) => {
const getText = val => {
// 通过onChangeText传参
onChangeText({
val })
}
return (
<div>
<div style={
{
border: '1px solid #ccc', zIndex: 100 }}>
<Editor
onChange={
editor => getText(editor.getHtml())}
/>
</div>
</div>
)
}
// 定义prop类型
TextEditor.propTypes = {
onChangeText: PropTypes.func,
dispatch: PropTypes.func,
}