切换到功能组件与 useEffect 发生反应时出现问题

Question

我目前正在尝试将类组件（工作）更改为功能组件（不工作）。基本上，我的目标是使元素位于页面中心。编辑：如果任何人都可以发表评论ref={tc=>(this.treeContainer=tc)}，这也会非常有帮助！我的班级组件（有效）：/**  * Component returning a div containing a tree * Need to declare as class for ComponentDidMount()  */class CenterMe extends React.PureComponent {    state={}    /* Used to center the tree on render */    componentDidMount() {      const dimensions = this.treeContainer.getBoundingClientRect();      this.setState({        translate: {          x: 30,          y: dimensions.height / 2        }      });    }    /* Returns the actual tree content */    render(){      return(          <div class="treeWrapper" ref={tc => (this.treeContainer = tc)}>              <Tree                  translate = {this.state.translate}              />          </div>      );    }}我当前的功能组件看起来像这样并且不起作用：function CenterMe() {    const [state, setState] = useState({translate:{x:0,y:0}); // Added thanks to @jstu    /* Used to center the tree on render */    useEffect(()=> {      const dimensions = treeContainer.getBoundingClientRect();      setState({        translate: {          x: 30,          y: dimensions.height / 2        }      });    });    /* Returns the actual tree content */      return(          <div class="treeWrapper" ref={tc => (this.treeContainer = tc)}>              <Tree                  translate = {this.state.translate}              />          </div>      );}更具体地说，它抱怨 setState 和 treeContainer 没有定义。如果重要的话，树组件是从react-d3-tree导入的，翻译函数基本上按照字面意思做——它移动树。我认为问题主要集中在ref={tc=>(this.treeContainer=tc)}，所以对此的解释也有帮助。太感谢了！

Answer 1

您需要使用添加两个钩子useRef来useState进行转换

function CenterMe() {

 const [translate, setTranslate] = useState({ x: 0, y: 0 });

 const treeContainer = useRef(null)

 /* Used to center the tree on render */

 useEffect(()=> {

  const dimensions = treeContainer.current.getBoundingClientRect();

  setTranslate({

      x: 30,

      y: dimensions.height / 2

  });

 }, []);

/* Returns the actual tree content */

  return(

      <div class="treeWrapper" ref={treeContainer}>

          <Tree

              translate={translate}

          />

      </div>

  );

}

useState 将替换基于类的组件中的 setState，如果您访问 treeContainer.current 键，则 useRef 将为您提供当前引用。

为了解释什么是 ref 部分，基本上，您的情况下的 ref 是引用 dom 节点，例如，如果您的树组件如下所示：

<div className="awesome-class">

 <p>Hi</p>

</div>

use ref 在这里所做的是，它会给你 dom 元素 ref，假设树组件像上面的例子一样，它看起来像这样。

    <div class="treeWrapper">

     <div className="awesome-class">

      <p>Hi</p>

     </div>

    </div>

通过 ref，您可以从 dom 获取元素，例如，在您的特定情况下，getBoundingClientRect将为您提供该特定元素的大小，正如您所看到的，这非常有用，因为您可以使用父组件中的子值。

Answer 2

所以你似乎错过了状态挂钩。尝试这个

    function CenterMe() {

    const [state, setState] = useState({translate:{x:0,y:0}}); // Set an initial state

    const treeContainer = useRef(null);

        /* Used to center the tree on render */

        useEffect(()=> {

          const dimensions = treeContainer.current.getBoundingClientRect();

          setState({

            translate: {

              x: 30,

              y: dimensions.height / 2

            }

          });

        },[]);

        /* Returns the actual tree content */

          return(

              <div class="treeWrapper" ref={treeContainer}>

                  <Tree

                      translate = {state.translate}

                  />

              </div>

          );

    }

我没有测试过这个。但您缺少的是 useState 挂钩。我还注意到您的意思是实现 componentDidMount。所以你需要在最后传递一个空数组。这样它的行为就像 componentDidMount

Answer 3

好的，有几件事。Use state 返回一个可以使用语法 [] 解构的数组。像这样

    const [someName, setSomeName] = useState({

        translateX: 10,

        translateY: 20 

    })

您正在为 useState 提供一个匿名函数。不知道你能不能做到，以前没做过。

但请尝试我上面写的解决方案。通过调用该方法设置 translatioY 的值，然后在 Tree 组件中执行此操作。

<Tree  translate = {someName}/>

对于 ref 你必须使用 useRef() 钩子