反应：如何获得一个元素高度，消失并以新大小出现

Posted 2023-02-25

【中文标题】反应：如何获得一个元素高度，消失并以新大小出现

【英文标题】：React: How to get a elements hight, that disappears and appears with new size

【发布时间】：2020-12-15 06:55:17

【问题描述】：

抱歉标题混乱

我正在向论坛添加编辑功能，我需要获取主题的标题元素高度和宽度，以便我单击编辑按钮，组件重新呈现，而不是标题，我们有一个文本输入标题的宽度和高度。问题是我只能正确执行一次。如果我在不刷新的情况下第二次编辑并保存，则下一个文本输入具有第一次编辑的标题宽度/高度

这是我的代码：

export default TopicComponent(someProps...)

const titleRef = useRef('');
const [isAuthor, setIsAuthor] = useState(author === user.id);
  const [editContentState, setEditContent] = useState(false);
  const [titleSize, setTitleSize] = useState( height: null, width: null );

 useEffect(() => 
   setTitleSize(height: titleRef.current ? titleRef.current.offsetHeight : null, width: titleRef.current ? titleRef.current.offsetWidth : null)
  ,[]);
function edit() 
    
    setIsAuthor(!isAuthor);
    setEditContent(!editContentState);
  

  async function discard() 
   
    setIsAuthor(!isAuthor);
    setEditContent(!editContentState);
  

 async function handleUpdateTopic() 
    setIsAuthor(!isAuthor);
    setEditContent(!editContentState);

   //do more stuff
  

return (
    <div className=styles.container>
      <span>
        <img  src=img_url />
        <div className=styles.info>
          editContentState ? (
            <input
              className=styles.comment_box
              style= height: titleSize.height, width: titleSize.width 
              defaultValue=topicContent.title
              onChange=(e) => (topicContent.title = e.target.value)
            />
          ) : (
            <h1 ref=titleRef>topicContent.title</h1>
          )
          <p>
            name surname
          </p>
          editContentState && (
            <>
              <button
                style= width: 200 
                type="button"
                onClick=handleUpdateTopic
              >
                Save Changes
              </button>
              <button type="button" onClick=discard>
                Discard changes
              </button>
            </>
          )
          isAuthor && (
            <button type="button" onClick=edit>
              Edit
            </button>
          )
        </div>
      </span>

所以我知道使用 useEffect 的这种方式我只设置了一次 titleSize 状态，我试图直接将 titleSize 属性改变为：

useEffec(()=> 
titleSize.width = titleRef.current ? titleRef.current.offsetWidth : null )

不强制重新渲染，但我得到相同的结果，我可以得到第一次加载的标题元素高度和宽度。

有人知道更好的方法吗？我到达了网络，但不幸的是我没有得到预期的答案（可能是因为我没有使用正确的关键字来获得正确的答案）

非常感谢任何帮助！

【问题讨论】：

好像你的useEffect 在依赖数组中没有任何东西，所以它只在组件挂载时执行。我会将其更改为在该数组中包含titleRef，因此每次titleRef 更改时都可以运行它

【参考方案1】：

我认为你应该将 topicContent 传递给 useEffect。所以当 topicContent 改变时，useEffect 会再次运行。

useEffect(() => 
    setTitleSize(height: titleRef.current ? titleRef.current.offsetHeight : null, width: titleRef.current ? titleRef.current.offsetWidth : null)
,[topicContent]);