小编ska*_*van的帖子

有一堆类似的问题，但我看不到一个与我的难题相匹配的问题。

我有一个反应组件（径向旋钮控件 - 有点像滑块）。我想达到两个结果：

1. 旋转旋钮并将旋钮值向上传递给父级以进行进一步操作。
2. 从父级接收目标旋钮值并相应地更新旋钮。
3. 一切都没有进入无限循环！

我已经拔掉了头发 - 但有一个似乎违反反应原则的可行解决方案。

我有Knob.js作为环绕第三方旋钮组件的反应组件，我有app.js作为父级。

在 Knob.js 中，我们有：

export default class MyKnob extends React.Component {
    constructor(props, context) {
        super(props, context)

        this.state = {
            size: props.size || 100,
            radius: (props.value/2).toString(),
            fontSize: (props.size * .2)
        }
        if (props.value){
            console.log("setting value prop", props.value)
            this.state.value = props.value
        } else {
            this.state.value = 25           // any old default value
        }

      }

为了处理来自父级 (app.js) 的更新，我在 Knob.js 中有这个：

      // this is required to allow changes at the …

我一定错过了一些明显的东西.我试图在Bootstrap 4中实现Holy Grail布局的衍生物.

而不是Header - > Left Column,Fluid Center,Right Column - > Footer,我希望我的页眉和页脚位于Fluid Center Column中.显然,顶部的标题,底部的页脚和中心的流体含量.并且所有列的高度相同.

-----------------------------------------------------
|          |       Header              |            |
|          |---------------------------|            |
|  LEFT    |                           |  RIGHT     |
|  PANEL   |       MAIN CONTENT        |  PANEL     |
|          |                           |            |
|          |                           |            |
|          |---------------------------|            |
|          |       Footer              |            |
-----------------------------------------------------

代码的骨骼如下所示.我正在努力的方法是让页眉和页脚正确显示在流体中心列中.我觉得答案在于FlexBox,但是我无法理解如何做到这一点!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid h-100" id="root">
  <div class="row h-100">
    <div class="col-md-3 fixed py-3">Page Panel Left</div>
    <div class="col fluid py-3">Page Panel Main Stage

      <div …