i don't know what difference in this code. class a is component and example is example.js

import React, {Component} from 'react';

const styles = {
    border: {
        display: 'inl,reactjs,babeljs"/>
	














    

		

        

            
            时间戳
        

		

		

        
		

    
















	
首页  > 解决方案 > 未捕获的类型错误：无法分配给对象 '# 的只读属性 '''

i don't know what difference in this code.
class a is component and example is example.js



import React, {Component} from 'react';

const styles = {
    border: {
        display: 'inl












reactjs - 未捕获的类型错误：无法分配给对象 '# 的只读属性 '''

i don't know what difference in this code.
class a is component and example is example.js



import React, {Component} from 'react';

const styles = {
    border: {
        display: 'inl





问题描述



i don't know what difference in this code.
class a is component and example is example.js



import React, {Component} from 'react';

const styles = {
    border: {
        display: 'inline-block',
        height: '19px',
        padding: '1px 8px 0',
        border: '2px solid',
        borderRadius: '12px',
        lineHeight: '20px',
        fontSize: '14px',
        verticalAlign: 'top',
    },
    default: {
        display: 'inline-block',
        height: '20px',
        padding: '1px 10px 0',
        borderRadius: '10px',
        lineHeight: '21px',
        fontSize: '13px',
        verticalAlign: 'top',
    },
    state: {
        display: 'inline-block',
        width: '14px',
        height: '13px',
        paddingTop: '1px',
        lineHeight: '14px',
        fontSize: '11px',
        color: '#fff',
        letterSpacing: '-0.5px',
        textAlign: 'center',
        verticalAlign: 'top',
    }
};

class A extends Component {
    static defaultProps = {
        type: 'default',
    };

    render() {
        const {
            label,
            style,
            type,
            ...other
        } = this.props;


        switch (type) {

            case 'border':
                elementStyle = styles.border;
                break;
            case 'default':
                elementStyle = styles.default;
                break;
            case 'state':
                elementStyle = styles.state;
                break;
        }

        return (
            <span style={Object.assign(elementStyle, style)} {...other}>{label}</span>
        );
    }
}

export default A;




and example code is example.js



import A from './A';

    export default class Example extends React.Component {
        render() {
            return (
                <div>
                    <A style={{background: '#fe6969', color: '#fff'}} /> &nbsp;
                    <A style={{background: '#ff8137', color: '#fff'}} /> &nbsp;
                    <A  style={{background: '#fcb400', color: '#fff'}} /> &nbsp;
                </div>
            );
        }
    }




this code error is Uncaught TypeError: Cannot assign to read only property 'background' of object '#'



i use babel-loader 8, babel7 ,webpack4



if i correct Object.assgin({}, elementStyle, style) is working.
i think this error occur when rerendering A component.
i don't know why this error...



please help me. 







Ways to use local variable in another class ( showing it in jsp page)


Is there a way to get values of local variables in one class and show that in jsp page?  



For example,   



public class a { 
    public method b() { 
         String c;




I want to use the String c and show it in jsp page. 



${c} 




1) Is there a way to use a local variable of a class from outside of that class?

2) if not, just make the variable global, and use it?  ( What I mean by global is using static. I looked it up and Java doesn't have global variable)

3) if so, in JSP page, can you tell me some ways to show that value?   




  
${class.variable name} <--- Would this work as well?




标签： reactjsbabeljs


解决方案









您需要做的就是使用 spread 连接/合并两个这样的对象



{{...elementStyle, ...style}}  or

{Object.assign({}, elementStyle , style) }




您应该了解 Object.assign 的工作原理。它返回目标对象作为其操作的返回值。



因此，在第一种语法中：



Object.assign({}, elementStyle , style)




您正在使用 elementStyle 和 style 的可枚举属性创建一个全新的对象。



如果你这样做：



Object.assign(elementStyle, style)




然后elementStyle 本身就是目标对象，因此它将被改变，这将是从 Object.assign 返回的内容。



这是我的意思的一个例子。



示例 1：







// With no new target object
const original = [{id:1}, {id:2}, {id:3}];

const newArray = original.map(elem => {
  return Object.assign(elem, {id:2});
});

console.log('Original object has changed');
console.log(original);

//------------------------------

// With a new target object
const original2 = [{id:1}, {id:2}, {id:3}];

const newArray2 = original2.map(elem => {
  return Object.assign({}, elem, {id:2});
});

console.log('Original object has not changed');
console.log(original2);









示例 2：



var styles =  {
  circle: {backgroundColor: 'yellow', height: '1005', width: '100%'},
  circleA: {backgroundColor: 'blue'},
};




所以我们需要所有的圆都有默认的圆样式，但是我们需要改变一些属性，



// background yellow
<div style={styles.circle}></div>

// background  blue
<div style={Object.assign(styles.circle, styles.circleA)}></div>

// expeted background yellow, but it's blue. cus styles.circle still have it's merged value
<div style={styles.circle}></div>




解决方案是将一个空对象传递给 Object.assign()。通过这样做，您告诉该方法使用您传递的对象生成一个 NEW 对象。



示例 3：







const obj1 = {
  name: "J"
}

const obj2 = {
  gander: "m"
}

// Here, obj1 is the same after the Object.assign call
console.log(Object.assign({}, obj1, obj2));
console.log(obj1)
console.log(obj2)

console.log("without empty obj passed")

// Note that after this call, obj1 holds both keys. So this will mutate it:
console.log(Object.assign(obj1, obj2));
console.log(obj1) // This is different now
console.log(obj2)









在你的情况下，



`<A propstyle={{background: '#fe6969', color: '#fff'}} />

<A propstyle={{background: '#ff8137', color: '#fff'}} /> ` 




组件 A 在 Parent 中定义了两次，这意味着我们将得到两个圆圈，子组件将渲染两次。



在您定义的子组件中，如下所示：



<span style={Object.assign(elementStyle , style) }{...other}>{label}</span>




第一次渲染： 



Object.assign 覆盖从右到左 propsstyle到 elementStyle 的属性，这里 elementStyle 本身就是目标对象，这将是 Object.assign 返回的内容。



风格道具：  { background: "#fe6969", color: "#fff" }



元素样式：{ background: "#fe6969", borderRadius: "10px", color: "#fff" }



第二次渲染： 



Object.assign 尝试从右到左覆盖属性，但 elementStyle 有{ background: "#fe6969", borderRadius: "10px", color: "#fff" }



并且 Object.assign 仍在循环中（记住示例 1 .map()）



风格道具：  { background: "#ff8137", color: "#fff" }



抛出错误：'TypeError：无法分配给对象'的只读属性'背景'，{Object.assign(elementStyle , style) }因为没有新的目标对象。



请在此处找到完整代码 



希望能帮助到你。阅读更多










推荐阅读