如何仅更改 object 的一个属性

Question

我正在构建一个 object，并且只有一个属性应该根据另一个值更改，所以一个开关是理想的，但我不能在 object 的初始化中放置一个开关。 我知道这可能很容易，但我是 JS 新手。

class DegreesCircle extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            type: this.props.type,
            degrees: this.props.degrees
        }
    }

    render() {
        let circleStyle = {
            position: "relative",
            left: "50%",
            top: "45%",
            transform: "translate(-50%, 0)",

            //I need this to change according to this.props.type
            //I'd put a switch in here if I could
            borderColor: "a value",
            borderStyle: "solid",
            borderWidth: "0.5vh",
            borderRadius: "50%",
            width: "20vh",
            height: "20vh",
        }

如何仅更改 circleStyle 的borderColor 属性？

编辑：我不想把开关放在前面什么的。 我正在考虑更改 object 的一个属性。

Answer 1

您可以使用传播语法

 let circleStyle = {
        position: "relative",
        left: "50%",
        top: "45%",
        transform: "translate(-50%, 0)",
        borderStyle: "solid",
        borderWidth: "0.5vh",
        borderRadius: "50%",
        width: "20vh",
        height: "20vh",
    }


switch (this.props.type) {
case x: 
  circleStyle = {
      ...circleStyle,
      borderColor: value,
  }
  break;
case y:
  ....

Answer 2

您可以像这样使用三元运算符：

    let circleStyle = {
        position: "relative",
        left: "50%",
        top: "45%",
        transform: "translate(-50%, 0)",
        borderColor: this.props.type ? 'someValue' : 'otherValue',
        borderStyle: "solid",
        borderWidth: "0.5vh",
        borderRadius: "50%",
        width: "20vh",
        height: "20vh",
    }

如果您有两个以上的值，您可以定义一个 function，它根据条件返回一个字符串：

const getBorderColor = () => {
 switch(this.props.type) {
  case 'a':
   return 'someColor';
  case 'b':
   return 'otherColor';
  default:
   return 'defaultColor';
 }
}

并像这样使用它：

let circleStyle = {
    position: "relative",
    left: "50%",
    top: "45%",
    transform: "translate(-50%, 0)",
    borderColor: getBorderColor(),
    borderStyle: "solid",
    borderWidth: "0.5vh",
    borderRadius: "50%",
    width: "20vh",
    height: "20vh",
}

每次使用 spread(...) 并创建一个新的 object 可能效率低下，因此这也是解决问题的好方法。

Answer 3

您可以使用扩展命令...来合并对象：

 let circleStyle = { // base styles position: "relative", left: "50%", top: "45%", transform: "translate(-50%, 0)" } if (true) { // insert condition circleStyle = {...circleStyle, borderColor: "a value", borderStyle: "solid", borderWidth: "0.5vh", borderRadius: "50%" } } console.log(circleStyle);

Answer 4

您可以在 object 初始化之前编写开关。

render(){
  let borderColor = '';
  switch(this.state.type){
     case "TYPE_A": borderColor = 'red';break;
     case "TYPE_B": borderColor = 'blue';break;
     default: borderColor = 'green';break;
  }
  // then use it in the object
   let circleStyle = {
        position: "relative",
        left: "50%",
        top: "45%",
        transform: "translate(-50%, 0)",
        borderColor,
        //rest of the attributes
     }
     //rest of the render()

 }

Answer 5

在创建 object 之前执行此操作，然后分配给您想要的属性；

let borderClr;
switch (this.props.type) {
  case 'val1':
    borderClr = 'someThing'
    break;
  case 'val2':
    borderClr = 'someThingELSE'
    break;

  default:
    break;
}


let circleStyle = {
  position: "relative",
  left: "50%",
  top: "45%",
  transform: "translate(-50%, 0)",
  borderColor: borderClr,
  borderStyle: "solid",
  borderWidth: "0.5vh",
  borderRadius: "50%",
  width: "20vh",
  height: "20vh",
}

Answer 6

如果您的值不多并且它们在某处定义，我想不出比这更简单的任何其他方法。

 //Why not do this? var PossibleValues = { type1: value1, type2: value2 }; //Then let circleStyle = { position: "relative", left: "50%", top: "45%", transform: "translate(-50%, 0)", // You just get the value by calling it's key borderColor: possibleValues[this.state.type], borderStyle: "solid", borderWidth: "0.5vh", borderRadius: "50%", width: "20vh", height: "20vh", }

Answer 7

我最终设置了这样的值：

        switch (this.state.type) {
            case (type.A):
                circleStyle.borderColor = "#ff3863";
                break;
            case (type.B):
                circleStyle.borderColor = "#000000";
                break;
            case (type.C):
                circleStyle.borderColor = "#000000";
                break;
            default:
                circleStyle.borderColor = "#000000";
                break;
        }

这正是我所寻找的，只改变了 object 的一个属性：

circleStyle.borderColor = "#000000";

Answer 8

There are multiple ways you can go about this, here is an examples about how you can implement this, in summary the implementation here uses an object as a Hash to return the value of the the hash using the type as key.

 class Circle { // extends React.Component. constructor(props = {}) { this.props = props; } render() { let circleStyle = { position: "relative", left: "50%", top: "45%", transform: "translate(-50%, 0)", //I need this to change according to this.props.type //I'd put a switch in here if I could borderColor: this.borderColor[ this.props.type ] || 'default', borderStyle: "solid", borderWidth: "0.5vh", borderRadius: "50%", width: "20vh", height: "20vh", } console.log( circleStyle.borderColor ); } get borderColor() { return { 'type_a': 'red', 'type_b': 'blue', 'type_c': 'green', } } } // default value const circle_1 = new Circle({}); circle_1.render(); // red const circle_2 = new Circle({ type: 'type_a' }); circle_2.render(); // blue const circle_3 = new Circle({ type: 'type_b' }); circle_3.render(); // green const circle_4 = new Circle({ type: 'type_c' }); circle_4.render();

在上面的示例中，如果未定义类型，则将使用“默认”值。

根据您的原始示例，您似乎正在使用 React。 我建议将 styles 提取到单独的 function 中，这样您的render()方法会更加干净，也可以通过这样做，您可以单独测试该部分。

 const BORDR_TYPES = { 'type_a': 'red', 'type_b': 'blue', 'type_c': 'green', }; // this one extracts the type property from the properties object when generateStyles is called // and initialize the default value to empty object when no value is passed to this function. const generateStyles = ( { type, ...props } = {} ) => ({ position: "relative", left: "50%", top: "45%", transform: "translate(-50%, 0)", //I need this to change according to this.props.type //I'd put a switch in here if I could borderColor: BORDR_TYPES[ type ] || 'default', borderStyle: "solid", borderWidth: "0.5vh", borderRadius: "50%", width: "20vh", height: "20vh", }) console.log( generateStyles().borderColor ); console.log( generateStyles({ type: 'type_a' }).borderColor ); console.log( generateStyles({ type: 'type_b' }).borderColor ); console.log( generateStyles({ type: 'type_c'}).borderColor ); class Circle { // extends React.Component. constructor(props = {}) { this.props = props; } render() { const circleStyle = generateStyles( this.props ); console.log( circleStyle.borderColor ); } }

Answer 9

您可以在对象上使用传播语法

 const circleStyle = { position: "relative", left: "50%", top: "45%", transform: "translate(-50%, 0)", borderColor: "a value", borderStyle: "solid", borderWidth: "0.5vh", borderRadius: "50%", width: "20vh", height: "20vh", }; let prop = { borderStyle: "dashed", }; let newCircleStyle = {...circleStyle, borderStyle: prop.borderStyle || "solid", }; console.log(JSON.stringify(newCircleStyle, null, 2)); prop = { // borderStyle: "dashed", }; newCircleStyle = {...circleStyle, borderStyle: prop.borderStyle || "solid", }; console.log(JSON.stringify(newCircleStyle, null, 2));