父传子

使用props传值：子组件通过this.props进行接收就可以了

父组件

  1. import { PureComponent, Fragment } from 'react'
  2. import DocumentTitle from 'react-document-title'
  3. import router from 'umi/router'
  4. import styled from 'styled-components'
  5. import withStyled from '@@/styles/withStyled'
  6. import MineList from '../widgets/MineList' // 子组件
  8. const MineInfo = withStyled(styled.div`
  9.   position: relative;
  10.   z-index: 10;
  11.   margin: -20px 0 0;
  12.   padding: 20px 20px 0;
  13.   width: 100%;
  14.     // backgroundColor是withStyled里面的变量
  15.   background-color: ${(props) => props.theme.backgroundColor}; 
  16.   border-radius: 20px 20px 0 0;
  17. `)
  19. const list = [
  20.   {
  21.     icon: iconPlay,
  22.     title: '我的课程',
  23.     rightIcon: iconRight,
  24.     onClick: () => router.replace({ pathname: '/lesson' })
  25.   },
  26.   {
  27.     icon: iconLogo,
  28.     title: '关于小帮',
  29.     rightIcon: iconRight,
  30.     onClick: () => router.push({ pathname: '/document/about' })
  31.   }
  32. ]
  34. class MinePage extends PureComponent {
  35.   constructor(props) {
  36.     super(props)
  37.   }
  39.   render() {
  40.     const { account: { account = {} } } = this.props
  41.     return (
  42.       <DocumentTitle title='我的'>
  43.         <Fragment>
  44.           <MineInfo>
  45.             {list.map((item, index) => (
  46.               // {...item} 向子组件传递参数
  47.               // {...item} 向子组件传递参数
  48.               // {...item} 向子组件传递参数
  49.               <MineList {...item} key={index} /> // 子组件 
  50.             ))}
  51.           </MineInfo>
  52.         </Fragment>
  53.       </DocumentTitle>
  54.     )
  55.   }
  56. }
  57. export default MinePage

子组件

  1. import PropTypes from 'prop-types'
  2. import styled from 'styled-components'
  3. import withStyled from '@@/styles/withStyled'
  5. const Container = withStyled(styled.div`
  6.   width: 100%;
  7.   height: 76px;
  8.   display: flex;
  9.   align-items: center;
  10.   img:nth-of-type(1) {
  11.     width: 28px;
  12.     height: 28px;
  13.     margin: 0 16px 0 0;
  14.   }
  15.   span {
  16.     flex: 1;
  17.   }
  18.   img:nth-of-type(2) {
  19.     width: 20px;
  20.     height: 20px;
  21.   }
  22. `)
  24. const MineList = ({ title, icon, rightIcon, onClick }) => {
  25.   return (
  26.     <Container onClick={onClick}>
  27.       <img src={icon} />
  28.       <span>{title}</span>
  29.       <img src={rightIcon} />
  30.     </Container>
  31.   )
  32. }
  34. MineList.propTypes = {
  35.   title: PropTypes.string.isRequired,
  36.   icon: PropTypes.string.isRequired,
  37.   rightIcon: PropTypes.string.isRequired,
  38.   onClick: PropTypes.func
  39. }
  41. export default MineList

子传父—不带参数

子组件向父组件传值需要绑定一个事件，然后事件是父组件传递过来的this.props.event来进行值的更替
**
父组件

  1. import { PureComponent } from 'react'
  2. import router from 'umi/router'
  3. import PropTypes from 'prop-types'
  4. import styled, { createGlobalStyle } from 'styled-components'
  5. import withStyled from '@@/styles/withStyled'
  6. import GlobalModalRich from '@@/components/Modal/Rich'
  7. import FeedBack from '../FeedBack' // 子组件
  9. const NavbarPaddingSafe = createGlobalStyle`
  10.   #app {
  11.     padding-bottom: 49px;
  12.   }
  13. `
  15. const NavbarContainer = withStyled(styled.div`
  16.   position: fixed;
  17.   left: 0;
  18.   right: 0;
  19.   bottom: 0;
  20.   margin: 0 auto;
  21.   width: 100%;
  22.   height: auto;
  23.   max-width: ${(props) => props.theme.maxWidth};
  24.   box-shadow: 0 -6px 12px 0 rgba(0, 0, 0, 0.04);
  25.   background-color: #ffffff;
  26. `)
  28. const NavbarGroup = withStyled(styled.div`
  29.   display: flex;
  30.   align-items: center;
  31.   padding: 7px 0 6px;
  32. `)
  34. const NavbarButton = withStyled(styled.div`
  35.   flex: 25;
  36.   padding: 22px 0 0;
  37.   font-size: 10px;
  38.   line-height: 14px;
  39.   color: ${(props) => props.theme.font400};
  40.   text-align: center;
  41.   background-size: 20px 20px;
  42.   background-repeat: no-repeat;
  43.   background-position: top center;
  44.   background-image: url(${(props) => props.image});
  45. `)
  47. class ResourceNavbarButton extends PureComponent {
  48.   constructor(props) {
  49.     super(props)
  50.     // uniqueId、feedbackStatus是父组件传递进来的值
  51.     const { uniqueId, feedbackStatus } = this.props
  52.     this.uniqueId = uniqueId
  53.     this.state = {
  54.       feedbackStatus: feedbackStatus
  55.     }
  56.   }
  58.   componentWillUnmount() {
  59.     GlobalModalRich.hide()
  60.   }
  62.   action = {
  63.     handleShowFeedback: () => {
  64.       const feedback = {
  65.         title: '评价本节',
  66.         // 调用子组件
  67.         // handleConfirm接收子组件的事件或参数
  68.         // handleConfirm接收子组件的事件或参数
  69.         // handleConfirm接收子组件的事件或参数
  70.         children: <FeedBack uniqueId={this.uniqueId} handleConfirm={() => { this.action.handleFeedback() }} />,
  71.         onClick: GlobalModalRich.hide
  72.       }
  73.       GlobalModalRich.show(feedback)
  74.     },
  75.     // 接收到子组件到事件或状态后，触发到事件
  76.     // 接收到子组件到事件或状态后，触发到事件
  77.     // 接收到子组件到事件或状态后，触发到事件
  78.     handleFeedback: () => {
  79.       this.setState({ feedbackStatus: true })
  80.       this.props.handleConfirm()
  81.     }
  82.   }
  84.   render() {
  85.     const { feedbackStatus } = this.state
  86.     const { noteListStatus } = this.props
  87.     return (
  88.       <NavbarContainer className='ios-padding-safe'>
  89.         <NavbarPaddingSafe />
  90.         <NavbarGroup>
  91.           <NavbarButton image={iconFeedback} onClick={() => this.action.handleShowFeedback()}>
  92.             <span>评价本节</span>
  93.           </NavbarButton>
  94.         </NavbarGroup>
  95.       </NavbarContainer>
  96.     )
  97.   }
  98. }
  100. ResourceNavbarButton.propTypes = {
  101.   uniqueId: PropTypes.string.isRequired,
  102.   feedbackStatus: PropTypes.bool.isRequired,
  103.   noteListStatus: PropTypes.bool.isRequired
  104. }
  106. export default ResourceNavbarButton

子组件

  1. import { PureComponent } from 'react'
  2. import PropTypes from 'prop-types'
  3. import styled from 'styled-components'
  4. import classnames from 'classnames'
  5. import withStyled from '@@/styles/withStyled'
  6. import resourceService from '@@/services/resource'
  7. import GlobalModalRich from '@@/components/Modal/Rich'
  9. import iconBad from './icon-bad.png'
  10. import iconBadChecked from './icon-bad-checked.png'
  11. import iconGood from './icon-good.png'
  12. import iconGoodChecked from './icon-good-checked.png'
  13. import iconSimple from './icon-simple.png'
  14. import iconSimpleChecked from './icon-simple-checked.png'
  16. const Container = withStyled(styled.div`
  17.   display: flex;
  18.   align-items: center;
  19.   justify-content: center;
  20. `)
  22. const Item = withStyled(styled.div`
  23.   flex: 1;
  24.   font-size: 14PX;
  25.   display: flex;
  26.   flex-direction: column;
  27.   align-items: center;
  28.   color: ${(props) => props.theme.font100};
  29.   padding: 28px 0 0;
  30.   background-size: 24px 24px;
  31.   background-repeat: no-repeat;
  32.   background-position: top center;
  33.   span {
  34.     font-size: 10PX;
  35.     color: ${(props) => props.theme.font400};
  36.   }
  37.   &.focus {
  38.     span {
  39.       color: #FFC300;
  40.     }
  41.   }
  42.   &.bad {
  43.     background-image: url(${iconBad});
  44.     &.focus {
  45.       background-image: url(${iconBadChecked});
  46.     }
  47.   }
  48.   &.good {
  49.     background-image: url(${iconGood});
  50.     &.focus {
  51.       background-image: url(${iconGoodChecked});
  52.     }
  53.   }
  54.   &.simple {
  55.     background-image: url(${iconSimple});
  56.     &.focus {
  57.       background-image: url(${iconSimpleChecked});
  58.     }
  59.   }
  60. `)
  62. class FeedBack extends PureComponent {
  63.   constructor(props) {
  64.     super(props)
  65.     this.state = {
  66.       checkedValue: ''
  67.     }
  68.   }
  70.   action = {
  71.     handleFetch: async (type, name) => {
  72.       const { checkedValue } = this.state
  73.       if (checkedValue) {
  74.         return false
  75.       }
  77.       const { uniqueId } = this.props
  78.       this.setState({
  79.         checkedValue: name
  80.       })
  82.       try {
  83.         await resourceService.feedback(uniqueId, { feedBackType: type })
  84.       } catch (error) {
  85.         console.warn(error.message)
  86.       } finally {
  87.         setTimeout(GlobalModalRich.hide, 500)
  88.         // 向父组件发送事件，也可以传递参数
  89.         // 向父组件发送事件，也可以传递参数
  90.         // 向父组件发送事件，也可以传递参数
  91.         this.props.handleConfirm()
  92.       }
  93.     }
  94.   }
  96.   render() {
  97.     const { checkedValue } = this.state
  98.     const badClassName = classnames('bad', { focus: checkedValue === 'bad' })
  99.     const goodClassName = classnames('good', { focus: checkedValue === 'good' })
  100.     const simpleClassName = classnames('simple', { focus: checkedValue === 'simple' })
  101.     return (
  102.       <Container>
  103.         <Item className={badClassName} onClick={() => this.action.handleFetch(1, 'bad')}>
  104.           <span>没听懂</span>
  105.         </Item>
  106.         <Item className={goodClassName} onClick={() => this.action.handleFetch(2, 'good')}>
  107.           <span>有收获</span>
  108.         </Item>
  109.         <Item className={simpleClassName} onClick={() => this.action.handleFetch(0, 'simple')}>
  110.           <span>太简单</span>
  111.         </Item>
  112.       </Container>
  113.     )
  114.   }
  115. }
  117. FeedBack.propTypes = {
  118.   uniqueId: PropTypes.string.isRequired
  119. }
  121. export default FeedBack

子传父—带参数

父组件

  1. import { PureComponent, Fragment } from 'react'
  2. import DocumentTitle from 'react-document-title'
  3. import ExerciseCard from '../widgets/ExerciseCard'
  5. class DetailPage extends PureComponent {
  6.     constructor(props) {
  7.     super(props)
  8.   }
  10.   action = {
  11.     handleChangeDate: (exerciseId, type, value) => {
  12.       console.log(exerciseId, type, value)// 获取子组件传递过来的值
  13.     },
  14.   }
  16.   render(){
  17.     return (
  18.       <DocumentTitle title={title}>
  19.         <Fragment>
  20.           {exerciseList.map(item => (
  21.             <ExerciseCard
  22.               {...item}
  23.               isFinished={isFinished}
  24.               handleChangeDate={(exerciseId, type, value) => this.action.handleChangeDate(exerciseId, type, value)}
  25.               key={item.rowKey}
  26.               />
  27.           ))}
  28.         </Fragment>
  29.       </DocumentTitle>
  30.     )
  31.   }
  32. }

子组件

  1. import PropTypes from 'prop-types'
  2. import styled from 'styled-components'
  3. import withStyled from '@@/styles/withStyled'
  4. import classnames from 'classnames'
  6. import iconRadio from './icon-radio.png'
  7. import iconRadioCorrect from './icon-radio-correct.png'
  8. import iconCheckout from './icon-checkout.png'
  9. import iconCheckoutCorrect from './icon-checkout-correct.png'
  10. import iconCorrect from './icon-correct.png'
  11. import iconWrong from './icon-wrong.png'
  13. const Container = withStyled(styled.div`
  14.   position: relative;
  15.   padding: 16px 0 8px;
  16.   width: 100%;
  17. `)
  19. const Result = withStyled(styled.img`
  20.   position: absolute;
  21.   top: 0;
  22.   right: 0;
  23.   width: 72px;
  24.   height: 72px;
  25. `)
  27. const Order = withStyled(styled.div`
  28.   height: 20px;
  29.   font-size: 16px;
  30.   font-weight: bold;
  31.   color: ${props => props.theme.font100};
  32.   line-height: 20px;
  33. `)
  35. const Title = withStyled(styled.div`
  36.   margin: 8px 0 4px;
  37.   font-size: 16px;
  38.   text-align: justify;
  39.   text-align-last: left;
  40.   line-height: 24px;
  41.   color: ${props => props.theme.font100};
  42. `)
  44. const Answer = withStyled(styled.div`
  45.   position: relative;
  46.   display: flex;
  47.   align-items: center;
  48.   margin: 0 0 8px;
  49.   padding: 0 0 0 40px;
  50.   height: 41px;
  51.   background-color: #f5f7fa;
  52.   border-radius: 8px;
  53.   &:before {
  54.     position: absolute;
  55.     left: 12px;
  56.     top: 50%;
  57.     transform: translateY(-50%);
  58.     display: inline-block;
  59.     content: '';
  60.     width: 20px;
  61.     height: 20px;
  62.     background: url(${props => props.icon});
  63.     background-repeat: no-repeat;
  64.     background-size: cover;
  65.   }
  66.   &:last-of-type {
  67.     margin: 0 0 24px;
  68.   }
  69.   &.selected {
  70.     background-color: rgba(255, 221, 0, 0.1);
  71.   }
  72. `)
  74. const Analysis = withStyled(styled.div`
  75.   margin: 0 0 40px;
  76.   padding: 16px 12px;
  77.   background-color: #e5e9f2;
  78.   border-radius: 8px;
  79.   border: 1px solid rgba(229, 233, 242, 1);
  80. `)
  82. const CorrectAnswer = withStyled(styled.div`
  83.   font-size: 14px;
  84.   line-height: 18px;
  85.   color: ${props => props.theme.font100};
  86. `)
  88. const AnswerAnalysis = withStyled(styled.div`
  89.   margin: 4px 0 0;
  90.   font-size: 14px;
  91.   line-height: 22px;
  92.   color: ${props => props.theme.font100};
  93. `)
  95. const judgeResult = status => {
  96.   switch (+status) {
  97.     case 0:
  98.       return ''
  99.     case 1:
  100.       return iconCorrect
  101.     case 2:
  102.       return iconWrong
  103.     default:
  104.       return ''
  105.   }
  106. }
  108. const judgeType = type => {
  109.   if (type === 0) {
  110.     const typeDescription = '单选题'
  111.     const iconType = iconRadio
  112.     const iconSelect = iconRadioCorrect
  113.     return { typeDescription, iconType, iconSelect }
  114.   } else if (type === 1) {
  115.     const typeDescription = '多选题'
  116.     const iconType = iconCheckout
  117.     const iconSelect = iconCheckoutCorrect
  118.     return { typeDescription, iconType, iconSelect }
  119.   }
  120. }
  122. const judgeLabel = index => {
  123.   return String.fromCharCode(65 + index)
  124. }
  126. const ExerciseCard = ({ isFinished, exerciseId, title, type, status, content, options, analysis, handleChangeDate }) => {
  127.   const iconResult = judgeResult(status)
  128.   const { typeDescription, iconType, iconSelect } = judgeType(type)
  129.   let rightResult = ''
  131.   return (
  132.     <Container>
  133.       {iconResult && <Result src={iconResult} />}
  134.       <Order>
  135.         {title}【{typeDescription}】
  136.       </Order>
  137.       <Title>{content}</Title>
  138.       <div>
  139.         {options.map((item, index) => {
  140.           const { content, isUserAnswer, isCorrect } = item
  141.           const label = judgeLabel(index)
  142.           if (isCorrect) {
  143.             rightResult += label
  144.           }
  145.           const changeResult = isFinished ? () => { } : () => handleChangeDate(exerciseId, type, index)
  146.           const icon = isUserAnswer ? iconSelect : iconType
  147.           return (
  148.             <Answer className={classnames({ selected: isUserAnswer })} icon={icon} onClick={changeResult} key={index}>
  149.               {label}.{content}
  150.             </Answer>
  151.           )
  152.         })}
  153.       </div>
  154.       {isFinished && (
  155.         <Analysis>
  156.           <CorrectAnswer>正确答案：{rightResult}</CorrectAnswer>
  157.           <AnswerAnalysis>解析：{analysis}</AnswerAnalysis>
  158.         </Analysis>
  159.       )}
  160.     </Container>
  161.   )
  162. }
  164. ExerciseCard.propTypes = {
  165.   isFinished: PropTypes.bool,
  166.   exerciseId: PropTypes.number,
  167.   title: PropTypes.string,
  168.   type: PropTypes.number,
  169.   status: PropTypes.number,
  170.   content: PropTypes.string,
  171.   options: PropTypes.array,
  172.   analysis: PropTypes.string,
  173.   handleChangeDate: PropTypes.func,
  174. }
  176. export default ExerciseCard

中间件

withStyled.js—基础颜色组件

  1. import { forwardRef } from 'react'
  2. import { ThemeProvider, keyframes } from 'styled-components'
  4. export const theme = {
  5.   // 基础颜色
  6.   primaryColor: 'rgba(255, 221, 0, 1)',
  7.   secondaryColor: 'rgba(255, 196, 1, 1)',
  8.   linkColor: 'rgba(24, 170, 242, 1)',
  9.   borderColor: 'rgba(229, 233, 242, 1)',
  10.   backgroundColor: 'rgba(245, 247, 250, 1)',
  11.   maskColor: 'rgba(0, 0, 0, 0.5)',
  12.   shadowColor: 'rgba(200, 200, 200, 0.05)',
  13.   highLightColor: 'rgba(34, 34, 34, 1);',
  14.   // 基金相关
  15.   increaseColor: '#FC4447',
  16.   decreaseColor: '#3CC86B',
  17.   // 层级
  18.   maskZindex: 100,
  19.   popupZindex: 200,
  20.   dialogZindex: 300,
  21.   // 字体颜色
  22.   font100: '#324057',
  23.   font200: '#475669',
  24.   font300: '#5E6D82',
  25.   font400: '#8492A6',
  26.   font500: '#99A9BF',
  27.   font600: '#C0CCDA',
  28.   importantfont: '#FF8026',
  29.   // 宽度
  30.   maxWidth: '480PX',
  31.   // 加载器
  32.   loaderPrimaryColor: 'rgba(239, 242, 247, 1)',
  33.   loaderSecondaryColor: 'rgba(239, 242, 247, 0.6)'
  34. }
  36. export const autofill = keyframes`
  37.   from {
  38.     background - color: transparent;
  39.   }
  40.   to {
  41.     background - color: transparent;
  42.   }
  43. `
  45. export const popupCenter = keyframes`
  46.   0% {
  47.     transform: translateY(-50%) scale(0.8);
  48.   }
  49.   100% {
  50.     transform: translateY(-50%) scale(1);
  51.   }
  52. `
  54. export const riseNavbar = keyframes`
  55.   0% {
  56.     bottom: -64px;
  57.   }
  58.   100% {
  59.     bottom: 0;
  60.   }
  61. `
  63. const withStyled = (Component) => {
  64.   const StyledComponent = (props, ref) => (
  65.     <ThemeProvider theme={theme}>
  66.       <Component ref={ref} {...props} />
  67.     </ThemeProvider>
  68.   )
  70.   return forwardRef(StyledComponent)
  71. }
  73. export default withStyled

GlobalModalRich.js—模态框组件

  1. import PropTypes from 'prop-types'
  2. import styled from 'styled-components'
  3. import withStyled from '@@/styles/withStyled'
  4. import { MountPoint } from '@@/utils/dom'
  5. import iconClose from '@@/assets/icons/icon-close.png'
  7. const MaskBasic = withStyled(styled.div`
  8.   position: fixed;
  9.   left: 0;
  10.   right: 0;
  11.   top: 0;
  12.   bottom: 0;
  13.   background-color: ${(props) => props.theme.maskColor};
  14.   z-index: ${(props) => props.theme.maskZindex};
  15. `)
  17. const MaskCenter = withStyled(styled.div`
  18.   position: absolute;
  19.   left: 0;
  20.   right: 0;
  21.   top: 45%;
  22.   transform: translateY(-50%);
  23.   padding: 20px;
  24.   text-align: center;
  25.   z-index: ${(props) => props.theme.dialogZindex};
  26.   animation: ${popupCenter} 200ms linear forwards;
  27. `)
  29. const ModalContainer = withStyled(styled.div`
  30.   display: inline-block;
  31.   margin: 0 auto;
  32.   padding: 25px 20px;
  33.   max-width: 360px;
  34.   min-width: 240px;
  35.   width: 86%;
  36.   text-align: center;
  37.   border-radius: 10px;
  38.   background-color: #ffffff;
  39. `)
  41. const ModalTitle = withStyled(styled.h4`
  42.   font-size: 20px;
  43.   font-weight: bold;
  44.   line-height: 1.5;
  45.   color: ${(props) => props.theme.font100};
  46.   text-align: center;
  47. `)
  49. const ModalContent = withStyled(styled.div`
  50.   padding: 30px 0 25px;
  51. `)
  53. const ModalClose = styled.div`
  54.   margin: 40px auto 0;
  55.   width: 26px;
  56.   height: 26px;
  57.   background-size: 100% 100%;
  58.   background-repeat: no-repeat;
  59.   background-image: url(${iconClose});
  60. `
  62. const ModalComponent = ({ title, children, onClick }) => (
  63.   <MaskBasic onClick={onClick}>
  64.     <MaskCenter>
  65.       <ModalContainer onClick={(e) => e.stopPropagation()}>
  66.         <ModalTitle>{title}</ModalTitle>
  67.         <ModalContent>{children}</ModalContent>
  68.       </ModalContainer>
  69.       <ModalClose />
  70.     </MaskCenter>
  71.   </MaskBasic>
  72. )
  74. ModalComponent.defaultProps = {
  75.   title: '提示',
  76.   children: '请输入提示内容',
  77.   onClick: () => { }
  78. }
  80. ModalComponent.propTypes = {
  81.   title: PropTypes.string.isRequired,
  82.   children: PropTypes.node.isRequired,
  83.   onClick: PropTypes.func.isRequired
  84. }
  86. class GlobalModalRich extends MountPoint {
  87.   hide = () => {
  88.     this.removeMountPoint()
  89.   }
  91.   show = (options) => {
  92.     this.render(<ModalComponent onClick={this.hide} {...options} />)
  93.   }
  94. }
  96. export default new GlobalModalRich()