Реагировать JSX: уникальный ключ Опору в условном массиве

Question

В качестве компонента детского менее Реагировать, я получаю ошибку «уникальный ключ пропеллера» из-за мое использование массива внутри JSX условно:

Каждого у ребенка в массиве должен быть уникальный «ключ».

Кода, запускающая ошибка выглядит следующим образом:

<dl> 
    { item.sale ? 
    [<dt>Sale</dt>,<dd className="formatted">{item.sale}</dd>,<dt>SRP</dt>,<dd>{item.srp}</dd>] : 
    [<dt>Price</dt>,<dd className="formatted">{item.srp}</dd>] 
    } 
</dl> 

Я понимаю why the key prop is needed при визуализации дочерних компонентов, но как я удовлетворяю React/JSX, когда «ребенок в массиве» произвольный набор дочерних элементов вроде этого?

Answer 1

Реакция не может знать, что ваш массив статичен, поэтому вы получаете предупреждение. Самая практичная вещь, чтобы сделать здесь, чтобы написать что-то вроде:

var dl; 
if (item.sale) { 
    dl = <dl key="sold"> 
    <dt>Sale</dt> 
    <dd className="formatted">{item.sale}</dd> 
    <dt>SRP</dt> 
    <dd>{item.srp}</dd> 
    </dl>; 
} else { 
    dl = <dl key="unsold"> 
    <dt>Price</dt> 
    <dd className="formatted">{item.srp}</dd> 
    </dl>; 
} 

Предоставление ключей на корню рассказывает Реагировать, как он должен согласовать списки, когда item.sale изменения.

Я, как правило, считаю, что это легче читать.