[英]Do not nest ternary expression - alternative
I have this React component that can has 4 states: advisoryResults, results, noResults, newAccount. 我有这个React组件,它可以有4种状态:advisoryResults,results,noResults,newAccount。
I think it makes sense to do it with a ternary expression but this is not allowed, what can be a good alternative for that? 我认为使用三元表达式来做到这一点很有意义,但这是不允许的,对此有什么好的选择?
export default class Home extends React.Component {
state = {
isAdmin: false
};
render() {
const { isAdmin } = this.state;
return (
<div>
<Header />
<div css={innerWrap}>
{isAdmin ? (
<Button
onClick={this.handleAddNewContact }
>
Add new Contact
</Button>
) : (
''
)}
{searchMode === searchModes.advisoryPanels ? (
<>
<SearchAdvisoryPanels />
<div css={{ textAlign: 'center', margin: '60px auto' }}>
<ManAtDesk />
</div>
</>
) : searchMode === searchModes.noResultsPanel ? (
<SearchNoResultsPanel />
) : searchMode === searchModes.resultsPanel ? (
accountInfo.map((info, index) => (
<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />
))
) : searchMode === searchModes.addContactPanel ? (
<AddNewContactForm
onCancelAccount={this.onCancelAccount}
onSaveAccount={this.onSaveAccount}
/>
) : null}
</div>
</div>
);
}
}
Please advise. 请指教。
I would suggest doing something like this: 我建议做这样的事情:
export default class Home extends React.Component {
state = {
isAdmin: false
};
onCancelAccount = () => {};
onSaveAcciont = () => {};
renderSearchResults = (searchMode) => {
const { info, isAdmin, index } = this.props;
switch (searchMode) {
case searchModes.advisoryPanels:
return this.renderAdvisoryPanels();
case searchModes.noResultsPanel:
return <SearchNoResultsPanel />;
case searchModes.resultsPanel:
return <SearchResultPanel info={info} isAdmin={isAdmin} key={index} />;
case searchModes.addContactPanel:
return (
<AddNewContactForm
onCancelAccount={this.onCancelAccount}
onSaveAccount={this.onSaveAccount}
/>
);
default:
return null;
}
}
renderAdvisoryPanels = () => (
<React.Fragment>
<SearchAdvisoryPanels />
<div css={{ textAlign: 'center', margin: '60px auto' }}>
<ManAtDesk />
</div>
</React.Fragment>
);
render() {
const { isAdmin } = this.state;
return (
<div>
<Header />
<div css={innerWrap}>
{isAdmin && (
<Button onClick={this.handleAddNewContact}>Add new Contact</Button>
)}
{this.renderSearchResults(searchMode)}
</div>
</div>
);
}
}
Some of the handlers/props are not immediately visible from your example, so fix if I got something wrong. 从您的示例中无法立即看到某些处理程序/属性,因此,如果我遇到问题,请进行修复。
I was about to write an answer back when you asked this question with a switch statement. 当您用switch语句问这个问题时,我正要写一个答案。
Using a JSON containing every possible results could solve your problem without adding unnecessary code : 使用包含所有可能结果的JSON可以解决您的问题,而无需添加不必要的代码:
render() {
const { isAdmin } = this.state;
return (
<div>
<Header />
<div css={innerWrap}>
{isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
{
{
[searchModes.SearchAdvisoryPanels]: (
<>
<SearchAdvisoryPanels />
<div css={{ textAlign: 'center', margin: '60px auto' }}>
<ManAtDesk />
</div>
</>
),
[searchModes.noResultsPanel]: <SearchNoResultsPanel />,
[searchModes.resultsPanel]: accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
[searchModes.addContactPanel]: <AddNewContactForm onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
}[searchMode]
}
</div>
</div>
);
}
However this solution will mount all your components even though they are not displayed, using arrow functions instead could increase the performance by only mounting the desired component : 但是,即使未显示所有组件,此解决方案也将安装所有组件,而使用箭头功能可以通过仅安装所需组件来提高性能:
render() {
const { isAdmin } = this.state;
return (
<div>
<Header />
<div css={innerWrap}>
{isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
{
{
[searchModes.SearchAdvisoryPanels]: () => (
<>
<SearchAdvisoryPanels />
<div css={{ textAlign: 'center', margin: '60px auto' }}>
<ManAtDesk />
</div>
</>
),
[searchModes.noResultsPanel]: () => <SearchNoResultsPanel />,
[searchModes.resultsPanel]: () => accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
[searchModes.addContactPanel]: () => <AddNewContactForm onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
}[searchMode]()
}
</div>
</div>
);
}
EDIT 编辑
If the variable can have a value different from every given option, you can implement the following solutions. 如果变量的值可以不同于每个给定的选项,则可以实现以下解决方案。
Either send a function that does not do anything if the value is undefined : 如果值未定义,则发送不执行任何操作的函数:
}[searchMode] || (x => x)()
Or store the result outside of your return and call the function if it exists : 或将结果存储在返回值之外,并调用该函数(如果存在):
render() {
const { isAdmin } = this.state;
const searchRender = {
[searchModes.SearchAdvisoryPanels]: () => (
<>
<SearchAdvisoryPanels />
<div css={{ textAlign: 'center', margin: '60px auto' }}>
<ManAtDesk />
</div>
</>
),
[searchModes.noResultsPanel]: () => <SearchNoResultsPanel />,
[searchModes.resultsPanel]: () => accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
[searchModes.addContactPanel]: () => <AddNewContactForm onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
}[searchMode]
return (
<div>
<Header />
<div css={innerWrap}>
{isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
{searchRender && searchRender()}
</div>
</div>
);
}
EDIT : What is this dark magic ? 编辑:这是什么黑魔法?
The first step creates your JSON with computed properties , it allows you to assign an Objects keys from variables rather that hardcoded values : 第一步创建具有计算属性的JSON,它允许您从变量而不是硬编码值分配Objects键:
const searchModes = { SearchAdvisoryPanels: "a", noResultsPanel: "b", resultsPanel: "c", addContactPanel: "d" } const result = { [searchModes.SearchAdvisoryPanels]: 1, [searchModes.noResultsPanel]: 2 , [searchModes.resultsPanel]: 3, [searchModes.addContactPanel]: 4 } console.log(result)
We can now replace the values 1 2 3 4
with whatever we want. 现在,我们可以将1 2 3 4
替换为所需的值。 In this case, arrow functions. 在这种情况下,箭头起作用。 To get the result you want, just add braces at the end of the JSON : 要获得所需的结果,只需在JSON的末尾添加大括号即可:
const searchModes = { SearchAdvisoryPanels: "a", noResultsPanel: "b", resultsPanel: "c", addContactPanel: "d" } const search = "c" const result = { [searchModes.SearchAdvisoryPanels]: 1, [searchModes.noResultsPanel]: 2 , [searchModes.resultsPanel]: 3, [searchModes.addContactPanel]: 4 }[search] console.log(result)
If the values returned are converted to functions, you only have to add parenthesis at the end of your thing to call it : 如果将返回的值转换为函数,则只需在事情的末尾加上括号即可:
const searchModes = { SearchAdvisoryPanels: "a", noResultsPanel: "b", resultsPanel: "c", addContactPanel: "d" } const search = "c" const result = { [searchModes.SearchAdvisoryPanels]: () => 1, [searchModes.noResultsPanel]: () => 2 , [searchModes.resultsPanel]: () => 3, [searchModes.addContactPanel]: () => 4 }[search]() console.log('Short : ' + result) //Long syntax : const options = { [searchModes.SearchAdvisoryPanels]: () => 1, [searchModes.noResultsPanel]: () => 2 , [searchModes.resultsPanel]: () => 3, [searchModes.addContactPanel]: () => 4 } const action = options[search] const output = action() console.log('Long : ' + output)
This is what you should aways do on JS, move stuff to a fn. 这是您应该在JS上进行的工作,然后将内容移动到fn。 This approach keeps the render fn clear. 这种方法使渲染fn保持清晰。 Your getSearchMode has a clear reading, nothing complex is happening there. 您的getSearchMode读数清晰,没有复杂的动作。 You are not setting an unnecessary object, not creating many functions inside your render function or doing any magic - just plain old JS. 您并没有设置不必要的对象,没有在渲染函数中创建许多函数,也没有做任何魔术-只是普通的旧JS。
export default class Home extends React.Component {
state = {
isAdmin: false,
}
getSearchMode = (searchMode) => {
if (searchMode === searchModes.advisoryPanels) {
return (
<>
<SearchAdvisoryPanels />
<div css={{ textAlign: 'center', margin: '60px auto' }}>
<ManAtDesk />
</div>
</>
)
}
if (searchMode === searchModes.noResultsPanel) {
return <SearchNoResultsPanel />
}
if (searchMode === searchModes.resultsPanel) {
return accountInfo.map((info, index) => (
<SearchResultPanel info={info} isAdmin={this.state.isAdmin} key={index} /> // you should not use index as key
))
}
if (searchMode === searchModes.addContactPanel) {
return (
<AddNewContactForm
onCancelAccount={this.onCancelAccount}
onSaveAccount={this.onSaveAccount}
/>
)
}
return null
}
render() {
const { isAdmin } = this.state
return (
<div>
<Header />
<div css={innerWrap}>
{isAdmin ? <Button onClick={this.handleAddNewContact}>Add new Contact</Button> : ''}
{this.getSearchMode(searchMode)}
</div>
</div>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.