Question

我正在构建一个React组件，它根据条件返回不同的标签。代码如下：

// Header.jsx

import React from 'react';

const Header = ({...props}) => {
	let Tag;
	if (props.h1)
		Tag = 'h1';
	else if (props.h2)
		Tag = 'h2';
	else if (props.h3)
		Tag = 'h3';
	else if (props.h4)
		Tag = 'h4';
	else if (props.h5)
		Tag = 'h5';
	else
		Tag = 'h6';

	return (
		<Tag>
			{ children }
		</Tag>
	);
}

export default Header;

我虽然ES2015会支持if表达式，所以我尝试了let Tag = (if (expression) [...]);，但似乎它不支持。如何简化此代码段？

Answer 1

为了提高可读性，我想说for循环会更好：

let Tag;

for (let i of [1, 2, 3, 4, 5, 6]) {
    if (Tag = props['h' + i]) break;
}

Answer 2

您似乎在寻找ternary operator（它构成一个表达式，而不是mysql_query("select * from ( select * from dist where `Date`='{$_POST['date']}' and `Time`='{$_POST['time']}' group by `Part`, `Subject`, `Room` ) tbl where `Room`='{$ss2a['Room']}';");之类的语句，并且可以在作业中使用）：

if

当然，缩进可能会有所改进（缩进以匹配const Tag = props.h1 ? 'h1' : props.h2 ? 'h2' : props.h3 ? 'h3' : props.h4 ? 'h4' : props.h5 ? 'h5' : 'h6';），或者您可能希望改为使用else if和&&短路。

但是，对于你在这里所做的事情，我建议使用循环：

||

或者只是将标记名称作为属性存储在标记内容旁边，没有理由为一件事物提供6种不同的属性：

const Tag = (() => {
    for (let p of 'h1,h2,h3,h4,h5'.split(','))
        if (props[p])
           return props[p];
    return 'h6';
})();

Answer 3

我通过使用 regex 动态搜索标签解决了我的问题。代码结束如下：

＆＃13;

// Header.jsx

import React from 'react';

const Header = ({children, ...other}) => {
	let Tag = (() => {
		for(let key in other)
			if (/(h[1-6])/.exec(key)) return key;
		return 'h6';
	})();

	return (
		<Tag {...other}>
			{ children }
		</Tag>
	);
}

export default Header;

＆＃13;

您对此解决方案有何看法？

ES2015：如何简化带赋值的if语句？

3 个答案: