se значение свойства объекта, использующего значение свойства другого объекта

Question

Мне нужно создать массив объектов внутри функции рендеринга. Мне нужно присвоить свойство объекта в массиве значение внутри функции рендеринга.

var ref = [{"a":"x","b":"y"];//This is coming through a prop called ref. 
    var someArrayOfObject = [{t1:{ref.a}},{t1:{ref.b}}]; 

Я пользуюсь webpack и babel. я получаю сообщение об ошибке «Неожиданный токен». журнал ошибок указывает на «.». между ref и свойством, например. ref.a.

я не получаю сообщение об ошибке, когда я назначить {ref.a} к подпорке компонента

<SomeComponent someProp={ref.a} /> 

Answer 1

Я думаю, что путаница происходит из синтаксиса JSX для встраивания выражений JavaScript. Если вы хотите использовать буквенное выражение JS внутри кода JSX, вам нужно обернуть его в фигурные скобки (например, {ref.a}).

Вы также попытались использовать этот синтаксис в литературе объекта.

[{t1:{ref.a}},{t1:{ref.b}}]; 

Мы делаем это только в JSX, чтобы показать, что мы спасаясь разметку, чтобы использовать значение Javascript. В нормальном коде нет необходимости делать это. Вы можете безопасно удалить parens.

[{t1:ref.a},{t1:ref.b}]; 

Стоит также отметить, что ref массив не является объектом, вы должны ссылаться на первый элемент в массиве первый.

var someArrayOfObject = [{t1:ref[0].a},{t1:ref[0].b}]; 
<SomeComponent someProp={ref[0].a} /> 

Answer 2

Почему вы положить ref.a внутри {}? Вы по существу пытались создать объект без значения ключа. Вот исправление:

var ref = [{"a":"x","b":"y"]; 
var someArrayOfObject = [{t1:ref.a},{t1:ref.b}];