当没有子父组件时我们可以 React Context答案

【问题标题】：Can we React Context when there is no child-parent components当没有子父组件时我们可以 React Context
【发布时间】：2021-01-17 19:30:20
【问题描述】：

<Aux>
        <div>
          <DateTimePicker
            onChange={this.onChange}
            value={this.state.date}
          />
        </div>
        <StartContext.Provider value={{ ...this.state.date}}>
          {this.props.children}
        </StartContext.Provider>
      </Aux>

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

return (
            <Aux>
                <div className="bar">
                    <div className="start">
                        Start
                    </div>
                    <div className="date">
                        <StartDatePicker>
                            <StartDatePicker/>
                        </StartDatePicker>
                    </div>
                    <div className="start">
                        End
                    </div>
                    <div className="date">
                        <EndDatePicker />
                    </div>
                    {/* <button className="buttonposition" onClick={this.ChangeByHour}>Hour</button>
                    <button className="buttonposition" onClick={this.ChangeByShift}>Shift</button>
                    <button className="buttonposition" onClick={this.ChangeByDay}>Day</button>
                    <button className="buttonposition" onClick={this.ChangeByWeek}>Week</button>
                    <button className="buttonposition" onClick={this.ChangeByMonth}>Month</button> */}
                    <button className="buttonposition" onClick={() => window.location.reload()}>Apply</button>
                    <button class="button2">Overhead<CgDropOpacity /></button>
                </div>
            </Aux>
        )

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

使用 react js（上下文 API）。有 2 个组件 startdatepicker 和 Calendar。 StartDatepicker 组件 - 在 return() 中我正在使用和 {this.props.children} .so 在里面的日历组件中返回我正在写 ..这在我的 UI 中给了我 2 个我不想要的日期选择器。

当没有子父连接时如何借助反应上下文解决这个问题。

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

您的 UI 中有两个组件，因为您将 StartDatePicker 用作其自身的子级。

<StartDatePicker>
    <StartDatePicker/>
</StartDatePicker>

StartDatePicker 不需要有孩子。内心的已经没有孩子了。

但是，如果没有孩子，那么Context 就没有意义。上下文使其子代可以使用value。这就是它所做的一切。所以没有孩子的上下文什么都不做。

您需要重新考虑组件的层次结构。哪些组件需要访问上下文的值？那些需要在上下文Provider 内。

Provider 需要在组件树中更高。除了value 只是一个日期，该值可以是一个具有date 和setDate 属性的对象。然后StartDatePicker 可以使用上下文中的setDate 函数来更新上下文date。

您完全可以在不使用上下文的情况下做到这一点。将date 作为state 存储在Calendar 组件中，并将setDate 回调作为prop 传递给StartDatePicker。

【讨论】：