0

我刚刚完成了这篇博文教程ReactCalendarComponent，现在我正在尝试将教程提供的长一页组件分成不同的组件。我是 React 的新手，所以我开始阅读关于哪个是处理父组件和子组件之间数据的最佳方法的帖子；我得出结论，redux 对于这个项目来说太重要了，所以我尝试只使用 react Hooks。（如果决定不好，请纠正我）。最后我发现我的 Proyect 被分成不同的组件，但是父组件继续拥有与状态和子组件相关的所有功能。

父组件

import MonthTable from "./components/MonthTable"
import YearTable from "./components/YearTable"
import DateTable from "./components/DateTable"
import ShowHeader from "./components/ShowHeader"
import moment from "moment";

const DateObjectContext = React.createContext();

const Calendar = () => {
    const weekdayshort = moment.weekdaysShort();
    const [dateObject, setDateObject] = useState(moment());
    const [allMonths, setAllMonths] = useState(moment.months());
    const [selectedDay, setSelectedDay] = useState(0)
    const [showDateTable, setShowDateTable] = useState(true)
    const [showMonthTable, setShowMonthTable] = useState(false)
    const [showYearTable, setShowYearTable] = useState(false)

//Long list of functions that handles the child components and the state
//Here are some
let month = () => ( dateObject.format("MMMM") )

const handleShowYearTable = (e) => {
  if(showMonthTable === true){
    setShowYearTable(false)
  }else if(showDateTable === true){
    setShowDateTable(false)
  }
    setShowYearTable(true)
}


return (  
      <div className="tail-datetime-calendar">
          <DateObjectContext.Provider value={{
            month,
            showMonth,
            onPrev,
            onNext,
            handleShowYearTable,
            year,
          }}>
            <ShowHeader />
          </DateObjectContext.Provider>
          <div className="calendar-date">
            {
              <DateObjectContext.Provider
              value={{
               allMonths,
               setMonth,
               actualYear,
               setYear
              }}>
                {showYearTable && <YearTable props={year()}/>}
                {showMonthTable && <MonthTable />}
              </DateObjectContext.Provider>
            }
          </div>
          <div>
            <DateObjectContext.Provider
              value={{
                weekdayshort,
                daysInMonth,
                firstDayOfMonth,
                currentDay,
                onDayClick
              }}>
             {showDateTable && <DateTable />}
            </DateObjectContext.Provider>
          </div>  
      </div>    
     
    );
}

一个孩子的例子，ShowHeader

const ShowHeader = () => {
    const { month,
            showMonth,
            onPrev,
            onNext,
            handleShowYearTable,
            year} = useContext(DateObjectContext)

    return (
        <div className="calendar-navi">
          <span 
              className="calendar-button button-prev"
              onClick={e => onPrev()}></span>
            <span 
              data-tail-navi="switch" 
              className="calendar-label"
              onClick={ e => {showMonth()} }>
              {month()}
            </span>
            <span 
              className="calendar-label"
              onClick={e => handleShowYearTable()}>
              {year()}
            </span>
            <span 
              className="calendar-button button-next"
              onClick={e => {onNext()}}></span>  
        </div>
    )
}

我的问题是：¿如何将与子组件相关的功能放入每个组件中？

4

0 回答 0