如何用钩子调节React函数的呈现

Question

我正试图根据特定参数来调节不同React函数组件的呈现。

例如，如果输入字段只包括一个数字，我想渲染ComponentA，否则我想渲染Component B。我使用了一个switch case，它返回与正确case相对应的组件重要的是，每个组件都包括不同的挂钩(例如，不同数量的状态(。

当我运行程序时，我得到一个错误，即呈现了不同数量的钩子。实现这一目标的正确方法是什么目前我正在使用一个扩展ReactComponent类的类，因为它不使用Hook，但我正在努力找到一个允许我使用它们的解决方案。

Answer 1

您只需要在每个组件内使用相同数量的挂钩。如果返回一个组件(而不是直接调用组件函数(，则每个组件可以使用不同数量的钩子。例如：

function Component(props) {
const [field, setField] = useState('');
const isNumber = !isNaN(parseInt(field)); // or however you want to detect numbers
//...
return (
<div>
<input value={field} onChange={(e) => setField(e.target.value)}/>
{isNumber && <Component1/>}
{!isNumber && <Component2/>}
</div>
);
}

Answer 2

你可以这样做

const MainComp = () => {

const customRender = () =>{
if(val==1){
return(<Comp1>)
}else{
return (<Comp2>)
}
}
return(
<div>
{customRender}
</div>
)
}