Есть ли более сжатый способ назначения свойств компонентам в реакции?

Question

Использование реагировать, я часто делаю такие вещи, как:

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 spread attributes с ES6 object literal shorthand property initialization:

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

Answer 4

Ну это были некоторые быстрые ответы, но да, как это упомянуто каждый атрибут Разброс ES6 обычно используется для достижения этой цели:

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