Проверьте наличие определенного значения в каждом ключе объекта Javascript

Question

У меня есть следующая строка:

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

Что нужно сделать, это проверить, имеет ли объект «Move» значение «FirstPassMove» для ключа moveName. Если это так, я хочу, чтобы так переключиться на другой стиль. Это работает хорошо. Но чего я хочу добиться, так это проверить не только элемент 0 объекта, но и все объекты и проверить, есть ли moveName «FirstPassMove» в каком-либо элементе объекта. Это написано в Реакте 16.12

Спасибо!

Answer 1

Вы можете упростить свой jsx, определив отдельную функцию для Dynami c className, например:

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

props.moves.includes('FirstPassMove')

Если ваш props.moves является массивом, он вернет true или false, если эта строка находится внутри props.moves массива

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

Если вы хотите добавить className, если хотя бы один из ваших ходов имеет имя FirstPassMove или PassMove, вам следует использовать Array.prototype.some ()

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