是否有更简洁的方法为反应中的组件分配属性？

Question

使用反应，我经常发现自己做的事情：

render() {
  var a, b, c = ...
  return <SomeClass a={a} b={b} c={c}/>
}

我尝试了<SomeClass a b c/>，但没有将属性分配给组件。有没有更简洁的方法来做到这一点？

Answer 1

您可以尝试使用Object（您可以使用名为Object Literal Property Value Shorthand 的新ES2015功能，以避免{ a: a, b: b, c: c }）和{{3像这样

const a = 1, b = 2, c = 3;
return <SomeClass {...{ a, b, c } } />

spread attributes

Answer 2

您可以使用ES6的{... ext}语法。

例如，您可以通过执行以下操作获得与示例中相同的结果：

render() {
  var props = { a: ..., b: ..., c: ... }
  return <SomeClass {...props}/>
}

Answer 3

您可以将JSX spread attributes与ES6 object literal shorthand property initialization合并：

<SomeClass {...{a, b, c}} />

Answer 4

这些是一些快速的答案，但是正如所有人都提到的那样，ES6中的spread属性通常用于实现这一点：

var props = { a: 'Jim', b: 'Bob', c: 'Bill' };
return <MyComponent {...props} />

知道你在组件上定义道具的顺序很重要，并且通常可以用来做宽松的条件工作，以后道具会覆盖以前的道具，所以你可以做以下事情：

var props = { a: 'Jim', b: 'Bob', c: 'Bill' };

return <MyComponent {...props} a={"James"} /> //Override 'Jim' with 'James'

或者：

var option = { a: 'Jim', b: 'Bob', c: 'Bill' };

return <MyComponent c={"William"} d={"Henry"} {...props} />