支持 React 中的 Class 变量解构

Question

Is there a way to break down a prop object and assign them to a variable of the same name in the class?

I know about

({ first: this.first, second: this.second, } = props)

but you still have to specify what goes where. This gets messy with many variables.

I tried using

Object.assign(this, props);

but can't get it to work in the way I described.

I just think that doing something like:

this.first = props.first;
this.second = props.second;
...

is very cumbersome.

Answer 1

Unfortunately, your Object.assign(this, props); is about as automatic as it gets in JavaScript (and even in TypeScript; for now, you can't use destructuring with automatic initialization).

Mostly you don't want to do that with props anyway, see under the line below, but sticking to the question asked:

You could use an array with the names of the props, probably with a reusable utility function, for instance:

constructor(props) {
    super(props);
    grab(["first", "second"], this, props);
}

where grab is

function grab(names, target, source) {
    for (const name of names) {
        target[name] = source[name];
    }
    return target;
}

But mixing string literals with property literals like that can give you a bit of hassle when using refactoring tools that might miss them.

---

However , assigning props to instance properties is fairly unusual vs. simply using them from this.props (which is set up by React.Component 's constructor), perhaps via destructuring in the method where you want to use them:

render() {
    const {first, second} = this.props;
    return /*... JSX using `first` and `second` ... */;
}