子组件获取道具未定义答案

【问题标题】：Children component gets props as undefined子组件获取道具未定义
【发布时间】：2018-04-15 11:23:00
【问题描述】：

我正在尝试将道具传递给控制器下的子组件。我正在使用 redux 和 react-router 进行导航。问题是控制器中的一切都很好，它得到了它的初始道具，但是当我将它们传递给一个孩子时，我有一个未定义的构造函数或渲染函数。这是我的代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import moment from 'moment'

import LawsuitSchedule from '../components/LawsuitSchedule'
import LawsuitCalendar from '../components/LawsuitCalendar'

class LawsuitScheduleContainer extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    let {schedule} = this.props
    console.log(schedule)

    return (
      <LawsuitCalendar initialDate={schedule.initialDate}
                       selectedDate={schedule.selectedDate}
                       scheduledDates={schedule.scheduledDates}/>,
        <LawsuitSchedule/>
    )
  }
}

const mapStateToProps = state => ({
  schedule: state.schedule,
})

export default connect(mapStateToProps)(LawsuitScheduleContainer)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import momentPropTypes from 'react-moment-proptypes'
import moment from 'moment'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import '../styles/lawsuitCalendar.css'

export default class LawsuitCalendar extends Component {
  constructor (props) {
    super(props)
    console.log(props)
      }
  propTypes = {
    selectedDate: momentPropTypes.momentString,
    scheduledDates: PropTypes.array.isRequired,
  }

  handleChange = (date) => {
    this.setState({
      selectedDate: date,
    })
  }

  render () {
    let {selectedDate, scheduledDates} = this.props
    let highlightWithRanges = [
      {
        'scheduled-date': scheduledDates,
      },
    ]
    return (
      <DatePicker
        inline
        selected={selectedDate}
        onChange={this.handleChange}
        highlightDates={highlightWithRanges}
      />
    )
  }
}

【问题讨论】：

感谢您的回复，但它只是自闭标签的html5语法，不是错误

标签： reactjs react-redux

【解决方案1】：

问题出在另一个组件中，它也呈现了LawsuitCalendar。我不知道为什么它只显示一次，但我已经解决了我的道具问题——我只是没有通过它们。我已经添加了，也许有人可以回答为什么会这样？

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Grid, Row, Col } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import ReactTable from 'react-table'
import matchSorter from 'match-sorter'
import LawsuitCalendar from '../components/LawsuitCalendar'
import '../styles/lawsuitGrid.css'
import data from '../utils/data.json'

export default class LawsuitSchedule extends Component {
  render () {
    return (
      <Grid>
        <Row className="show-grid">
          <Col md={4}><LawsuitCalendar/></Col>
          <Col md={8}>
            <ReactTable data={data}
            ...
            />
          </Col>
        </Row>
      </Grid>
    )
  }
}

【讨论】：