有没有更简洁的方法在 react 中为组件分配属性

Question

使用 react，我经常发现自己在做这样的事情：

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

我尝试<SomeClass a b c/>但它没有将属性分配给组件。有没有更简洁的方法呢？

Answer 1

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

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

Example

Answer 2

您可以使用

ES6 的{... ext}语法。

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

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

Answer 3

您可以将 JSX 扩展属性与 ES6 对象文字速记属性初始化相结合：

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

Answer 4

好吧，这些是一些快速的答案，但是是的，正如每个人都提到的，ES6 中的 spread 属性通常用于实现此目的：

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

知道你在组件上定义 props 的顺序也很重要，并且通常可以用来做松散的条件工作，后面的 prop 会覆盖以前的 prop，所以你可以做这样的事情：

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} />