Reactjs 我只需单击一下即可更改渲染器，然后直接查询一个项目（ref）。这是个好办法吗？

我只需单击一下即可更改渲染器，然后直接查询一个项目（ref）。设置超时是一个好的解决方案？ （我不知道我是否在一次单击中更改渲染器，然后在事件中我可以在新的渲染器中执行任何操作。setTimeout好的解决方案？其他人有不同的解决方案，因为我觉得我做得不好。）

从“React”导入React；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
con1：错，
con2：错误
};
}
handleClick=（e）=>{
parseFloat（e.currentTarget.getAttribute（'data-id'））==1？
（这是我的国家。）({
con1：没错，
con2：错误
})) 
: 
（这是我的国家。）({
con2：没错，
con1：错误
}));
/*很好，但这是有效的*/
设置超时（（）=>{
console.log（此.buttonContainer.childNodes[0]）
},0)
/*不好
console.log（this.buttonContainer.childNodes[0]）；
*/
}
render（）{
const{con1，con2}=this.state；
返回(
this.handleClick（e）}
>
按钮
this.handleClick（e）}
>
按钮
this.buttonContainer=ref}
>
{con1？
（集装箱1）
:
（空）
}
{con2？
（集装箱2）
:
（空）
}
)}
}
导出默认测试；

在这种情况下，我建议对函数组件使用useEffect挂钩。逻辑将更具可读性

import React, { useState, useEffect, useRef } from "react";

const Test = props => {
  const [con1, setCon1] = useState(false);
  const [con2, setCon2] = useState(false);
  const buttonContainer = useRef(null);
  const handleClick = e => {
    const b = parseFloat(e.currentTarget.getAttribute("data-id")) === 1;
    setCon1(b);
    setCon2(!b);
  };
  useEffect(() => {
    if(buttonContainer.current) {
      console.log(buttonContainer.current.childNodes[0])
    }
  }, [buttonContainer.current, con1, con2])

  return (
    <div className="app-container">
      <button data-id="1" onClick={e => this.handleClick(e)}>
        Button
      </button>
      <button data-id="2" onClick={e => this.handleClick(e)}>
        Button
      </button>

      <div
        className="button-conteiner"
        ref={buttonContainer}
      >
        {con1 ? <div className="container1">container1</div> : null}

        {con2 ? <div className="container2">container2</div> : null}
      </div>
    </div>
  );
};

export default Test;

import React，{useState，useffect，useRef}来自“React”；
常量测试=道具=>{
const[con1，setCon1]=useState（false）；
const[con2，setCon2]=useState（false）；
const buttonContainer=useRef（null）；
常量handleClick=e=>{
const b=parseFloat（e.currentTarget.getAttribute（“数据id”））==1；
setCon1（b）；
setCon2（！b）；
};
useffect（（）=>{
if（按钮容器当前）{
console.log（buttonContainer.current.childNodes[0]）
}
}，[buttonContainer.current，con1，con2]）
返回(
这个.handleClick（e）}>
按钮
这个.handleClick（e）}>
按钮
{con1？container1:null}
{con2？container2:null}
);
};
导出默认测试；

import React, { useState, useEffect, useRef } from "react";

const Test = props => {
  const [con1, setCon1] = useState(false);
  const [con2, setCon2] = useState(false);
  const buttonContainer = useRef(null);
  const handleClick = e => {
    const b = parseFloat(e.currentTarget.getAttribute("data-id")) === 1;
    setCon1(b);
    setCon2(!b);
  };
  useEffect(() => {
    if(buttonContainer.current) {
      console.log(buttonContainer.current.childNodes[0])
    }
  }, [buttonContainer.current, con1, con2])

  return (
    <div className="app-container">
      <button data-id="1" onClick={e => this.handleClick(e)}>
        Button
      </button>
      <button data-id="2" onClick={e => this.handleClick(e)}>
        Button
      </button>

      <div
        className="button-conteiner"
        ref={buttonContainer}
      >
        {con1 ? <div className="container1">container1</div> : null}

        {con2 ? <div className="container2">container2</div> : null}
      </div>
    </div>
  );
};

export default Test;