Question

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

＆＃13;

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)

＆＃13;

<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>

＆＃13;

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}
      />
    )
  }
}

＆＃13;

Answer 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>
    )
  }
}

Children组件获取未定义的道具

1 个答案: