小编Dan*_*elJ的帖子

我想再次问这个问题，但现在问我如何使用函数/钩子来实现这一点。

我尝试使用 useRef 然后访问偏移表单 current.offsetTop，但是在安装组件后我很难访问这个 ref。

function ScrollComponent(props) {
  const foo = false; //loading method
  let resultsRef = useRef();

  useEffect(() => {
    window.scrollTo({
      behavior: "smooth",
      top: resultsRef.current.offsetTop
    });
  }, [resultsRef]);

  if (foo)
    return (
      <div>
        <h4>Loading...</h4>
      </div>
    );
  return (
    <div ref={resultsRef}>
      <h4>content</h4>
    </div>
  );
}

在上面的示例中，我有一个名为 foo 的常量，它不需要附加此滚动引用，因为它会在加载内容时显示。

但是，在运行此代码时，我得到了无法读取未定义的属性 'offsetTop'

在我的 useEffect 方法中，我将依赖项指定为 resultsRef，因此我希望它仅在内容 div 加载时写入 resultsRef 时才被调用，但是，情况并非如此。

抱歉，如果标题具有误导性，我不确定如何准确描述我正在寻找的内容。

我有一个数组result，我想变成多个对象，每个对象的属性是字段Name Test我需要让我的result.map方法，我用它来合并result与data

  result = [{
      "Name Test": "Yellow",
      Count: 124,

    },
    {
      "Name Test": "Black",
      Count: 124,
    },
    {
      "Name Test": "Blue",
      Count: 124,
    }
  ];

  data = [{
      "Name Test": "Yellow",
      pop: 1
    },
    {
      "Name Test": "Black",
      pop: 1
    },
    {
      "Name Test": "Blue",
      pop: 1
    }
  ];


result = result.map((obj1, index) => {
    const obj2 = data[index];
    return {
        [obj1["Name Test"].toUpperCase()]: {
            Count: obj1.Count,
            pop: obj2.pop,
        }
    };
}); …

我不知道我设法改变了什么,但就在那时我正在使用的一个div不会居中,我的html在下面

<div id="footer">
   <p>foo</p>
</div>

我的css在这里,

#footer {
    width: 90%;
    font-size: 16px;
    text-transform: uppercase;
    background: #EBEBEB;
    color: #3B3738;
    padding: 0.3%;

    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    text-align: center;

    margin: 0 auto;
    display:inline-block;
    font-family: 'Dosis', sans-serif;

    font-weight: 300!important;



}

我已经尝试了许多已经提供的解决方案,但他们似乎并没有把它放在中心位置.

经过一些测试,看起来它与这个Jquery脚本有关,https: //css-tricks.com/snippets/jquery/jquery-sticky-footer/这是在页脚上添加以下样式position: absolute;

编辑:我解决这个问题只需将其添加到CSS,我不确定为什么它会工作但它确实如此,

left: 0;
right: 0;