Я разрабатывал приложение и хотел отобразить список элементов. Состояние простое, массив элементов с именем, идентификатором и ключом selected, который будет использоваться каждым элементом для отображения набора специальных стилей, если элемент выбран. Я использую material-ui, и каждый элемент представляет собой компонент Box. Каждый компонент Box имеет обработчик OnClick для его выбора, но я понял, что, когда я выбираю элемент, только несколько стилей из него изменились, а box-shadow изменения не применились.
import React from "react";
import "./index.css";
import { Grid, Box } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
const Item = withStyles({
root: {
width: "200px",
height: "200px",
boxShadow: props => {
if (props.selected) {
return "4px 4px 24px 2px blue;";
}
return "4px 4px 24px 2px red";
},
backgroundColor: props => {
if (props.selected) {
return "lightblue";
}
return "orange";
},
border: props => {
if (props.selected) {
return "solid 4px blue";
}
return "solid 4px black";
},
marginLeft: "100px"
}
})(Box);
class Testing extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{
name: "one",
selected: true,
identifier: "first"
},
{
name: "two",
identifier: "second",
selected: false
}
]
};
}
selectItem(selectedIdx) {
this.setState(state => ({
items: state.items.map((item, idx) => {
if (idx === selectedIdx) {
return {
...item,
selected: true
};
}
return {
...item,
selected: false
};
})
}));
}
render() {
return (
<Grid container direction="row">
{this.state.items.map((item, idx) => (
/**
* In this case only apply styles for border and background-color, box-shadow
* doesn't have effect when you click the second element.
*/
<Item
key={item.identifier}
selected={item.selected}
onClick={() => this.selectItem(idx)}
/>
/*
* This case works properly.
<Item key={`${item.identifier}-${item.selected}`}
selected={item.selected}
onClick={() => this.selectItem(idx)} />
*/
))}
</Grid>
);
}
}
export default function App() {
return <Testing />;
}
Живой пример здесь: https://codesandbox.io/s/boring-bogdan-mcb0z В этом примере фактический код <Item> не работает (он не обновляет box-shadow стили), а закомментированный код Item работает правильно, не могли бы вы объясните мне, почему box-shadow изменения корректно работают в этом коде:
<Item key={`${item.identifier}-${item.selected}`}
selected={item.selected}
onClick={() => this.selectItem(idx)} />
но не включены:
<Item
key={item.identifier}
selected={item.selected}
onClick={() => this.selectItem(idx)}
Спасибо!