Question

我有以下一行：

<button className={`actionBoxButton ${props.moves[0].moveName !== "FirstPassMove" && props.moves[0].moveName !== "PassMove"  ? "actionBoxButtonGrey" : ''}`}

它的作用是检查对象moves是否具有键moveName的值“ FirstPassMove”。如果是这样，我希望切换到其他样式。这运作良好。但是我要实现的是，不仅要检查对象的元素0，还要检查所有对象，并检查对象的任何元素中是否有moveName“ FirstPassMove”。它是用React 16.12编写的

谢谢！

Answer 1

您可以通过为动态className定义一个单独的函数来简化jsx，如下所示：

const check = () => {
	let className_ = "";
    // if this.props.moves is an array, use of instead of in
	for(let i in this.props.moves) {
		if((this.props.moves[i].moveName !== "FirstPassMove") && (this.props.moves[i].moveName !== "PassMove")) {
			className_ = "actionBoxButtonGrey";
		}
	}

	return className_;
}

<button className={this.check()}>button</button>

Answer 2

如果您要添加className，以防至少其中一个动作具有FirstPassMove或PassMove名称，则应使用Array.prototype.some()

const hasPass = moves.some(({ moveName }) => (
  moveName === "FirstPassMove" || 
  moveName === "PassMove"
));

Answer 3

我猜您想检查所有moves是否满足约束条件，在这种情况下，您可以使用Array.prototype.every确保每一步都满足约束条件。如果只需要一些moves来满足约束条件，则可以改用Array.prototype.some。

// For example
const props = {
    moves: [
        { moveName: 'FirstPassMove' },
        { moveName: 'PassMove' },
        { moveName: 'PassMove' },
        { moveName: 'OtherPassMove' },
    ]
};

function isValidMove({ moveName }) {
    return moveName !== "FirstPassMove"
        && moveName !== "PassMove";
}


function getActionBoxButtonClassName(hasColor) {
    return `actionBoxButton ${hasColor ? "actionBoxButtonGrey" : ''}`;
}

console.log([
    getActionBoxButtonClassName(props.moves.every(isValidMove)),
    getActionBoxButtonClassName(props.moves.some(isValidMove))
]);

Answer 4

props.moves.includes('FirstPassMove')

假设您的props.moves是一个数组，如果此字符串位于props.moves数组中，它将返回true或false

检查Javascript对象的每个键中的特定值

4 个答案: