Question

使用React时，我经常使用以下模式：

const {foo, bar, pem, das} = this.props;
const props = {foo, bar, pem, das};

return (
   <MyComponent {...props}/>
);

我只是好奇是否有任何语法快捷方式逃脱了我在这里切出一步。感谢。

Answer 1

有关详细信息，请参阅Destructuring Assignment，Array.prototype.reduce()和Closures。

// Input.
const input = {
  props: {A: 1, B: 2, C: 3, D: 4, E: 5}
}

// Select specific keys.
const props1 = (({ A, C, D }) => ({ A, C, D }))(input.props)
console.log('Select 1', props1)

// Functional Select.
const select = (obj, ...keys) => keys.reduce((x, k) => ({...x, [k]: obj[k]}), {})
console.log('Select 2', select(input.props, 'A', 'C', 'D'))

// Exclude specific keys.
const { A, C, D, ...props2 } = input.props
console.log('Exclude', props2)

Answer 2

编写一个函数来选择适当的属性并将它们添加到对象中：

function reduceObjectToTheseProps(obj, props) {
  return props.reduce((filteredObjSoFar, prop) => {
    filteredObjSoFar[prop] = obj[prop];
    return filteredObjSoFar;
  }, {});
}

const reducedObj = reduceObjectToTheseProps(myObject, ['foo', 'bar']);

Answer 3

实际上不需要临时变量。为什么不在渲染参数中进行解构？

render = ({ foo, bar, pem, das }) => <MyComponent {...{ foo, bar, pem, das }} />

用于解构赋值的更短语法后跟扩展运算符？

3 个答案: