如何正确传递具有扩展属性的嵌套属性？ （JSX）

#1

你好。 我有代码：

class Component extends React.Component {
    render() {
        this.props.nested.prop = this.props.parse.nested.prop;
        return <div>Component</div>;
    }
    componentDidMount() {
        console.log(this.props.nested.prop);
    }
}
Component.defaultProps = {
    nested: {
        prop: "default",
    },
};

const obj1 = {
    nested: {
        prop: "obj1",
    },
};
const obj2 = {
    nested: {
        prop: "obj2",
    },
};

class Application extends React.Component {
    render() {
        return (
            <div>
                <Component parse={obj1} />
                <Component parse={obj2} />
            </div>
        );
    }
}

React.render(<Application />, document.getElementById("app"));
// console output:
// "obj2"
// "obj2"

为什么我得到 2 个独立组件的 1 个变量引用，而不是每个组件的 2 个nested.prop 实例？ 为什么 this.props 在安装后只保存组件所有实例的最后设置值？这是正常行为吗？ 我认为正确的行为是针对不同的实例具有不同的属性值。

附：我已经测试过这段代码here http://codepen.io/voronar/pen/mPwebK.

#2

jimfb https://github.com/jimfb已回答："You are mutating the default prop that was passed in. The line this.props.nested.prop = this.props.parse.nested.prop; is illegal."

我的下一个问题：How to pass nested properties without a manual mutation of props?

例如：

Component.defaultProps = {
    nested: {
        prop1: "default",
        prop2: "default",
    },
};

const props = {
    nested: {
        prop1: "value",
    },
};

let component = <Component {...props} />;

上面的代码指南 JSX 扩展属性功能只是覆盖 props.nested 并且我丢失了默认的嵌套属性。但这不是我需要的。 如何在JSX扩展属性解析阶段实现嵌套对象的递归遍历？
或者这种情况有一些有用的模式吗？

这其实是一个好问题！

简短的回答：你不能用扩展运算符进行深度合并——它只能进行浅层合并。 但你肯定可以编写函数来进行对象遍历并实现深度合并。

这实际上给你留下了 3 个选择：

1）只是不要进行深度合并。如果你有两层嵌套对象，你可以做这样简单的事情：

const newNested = {...oldProps.nested, ...newProps.nested };
const finalProps = { ...oldProps, nested: newNested };

浅合并force你说明确地你将拥有新的价值嵌套属性。这是一件好事，因为它使您的代码变得显而易见。 您还可以尝试可运行的示例here https://www.educative.io/collection/page/5638830484881408/70001/310001.

2）您可以使用不可变结构的库。 F.e.不可变.js https://facebook.github.io/immutable-js/docs/。有了它，您的代码将看起来非常相似。

const oldProps = Immutable.fromJS({
  nested:
  {
    prop1: "OldValue1",
    prop2: "OldValue2",
  }
});

const newProps = Immutable.fromJS({
  nested:
  {
    prop1: "NewValue1",
  }
});

const finalProps = oldProps.updateIn(['nested'], (oldNested)=>
  oldNested.merge(newProps.get('nested'))
)

3）你可以使用深度合并：在npm中找到一些实现或者自己编写 你将得到这样的代码（再次以 immutable.js 为例）：

const finalProps = oldProps.mergeDeep(newProps);

在某些情况下你可能需要这个，但是这样的代码使得更新操作implicit它提出了很多问题，这些问题都被大大列出了here https://stackoverflow.com/a/28248548/1427399