渲染组件的更好方法?反应

Question

我需要一种更好的方式来呈现这个组件，所以我需要建议。

检查我的代码：

renderComponent = () => {
if(id){
return <Placeholder> { id } </Placeholder>
} else if(date) {
return <Placeholder> This is date { date } </Placeholder>
} else if (testData === 'test'){
return <TestDataComponent></TestDataComponent>
}
}

也许换个地方会更好？我使用的是三元运算符，但这里有三个值。。。也许我需要再加一个条件。

我想说这是一项工作，但只需要重构并以更好的方式进行编写。

Answer 1

当您返回特定的组件时，因此您可以只使用表单3if块，如果该块具有true条件，则返回组件

const renderComponent = () => {
if(id){
return <Placeholder> { id }</Placeholder>
}
if(date) {
return <Placeholder> This is date { date }</Placeholder>
}
if (testData === 'test'){
return <TestDataComponent />
}
}

Answer 2

您可以始终使用三元运算符，而不是基本的if/else-

renderComponent = () => {
{id ? (<Placeholder> { id } </Placeholder>) : date ? ( <Placeholder> This is date { date } </Placeholder>):<TestDataComponent/>}

}

或者使用switch语句。您需要传递类型或您想要的任何情况，它将返回相关组件。您也可以将此开关封装在函数中。下面是一个切换语句示例：

switch (type) {
case id:
return <Placeholder> { id } </Placeholder>;
case date:
return  <Placeholder> This is date { date } </Placeholder>;
case test:
return <TestDataComponent></TestDataComponent>;
default:
return <>Something went wrong</>;
}