Декларирование маршрутов с использованием массива

Question

Я хочу, чтобы переместить мои объявления маршрута для React маршрутизатора в отдельные файлы, а затем завершить определение маршрута автоматически, например:

// Central array for routes 
const routes = []; 

// Two routes in separate files 
routes.push(<Route path="page1" component="Component1"/>); 
routes.push(<Route path="page2" component="Component2"/>); 

// Render the routes 
<Router history={browserHistory}> 
    {routes} 
</Router> 

Хотя это работает, я получаю предупреждение о том, все дети итератора, т. е. маршруты, должны иметь ключевую опору: Each child in an array or iterator should have a unique "key" prop. Но действительно ли нужны ключи в этом случае? По моему мнению, маршруты отображаются только один раз и не являются динамическими, хотя я использую массив.

Можно ли это сделать в реактиве?

Answer 1

Одно простое решение состоит в использовании Plain Routes вместо от JSX:

const routes = []; 

routes.push({ 
    path: 'path1', 
    component: Component1 
}); 

routes.push({ 
    path: 'path2', 
    component: Component2 
}); 

<Router routes={routes} history={browserHistory}/> 

Answer 2

Если вы отправляете реквизиты на дочерние компоненты без определенных идентификаторов, вы увидите это предупреждение.

Итак, в основном, когда вы говорите, запустите цикл и передайте параметры дочерним компонентам, вам нужно указать идентификаторы для каждой итерации в реквизитах.

Например,

const a=[ 
    {'id':1,'name':'x',age:'25'}, 
    {'id':2,'name':'y',age:'26'}, 
] 

Родитель компонент: -

class Parent extends React.Component{ 

    constructor(){ 
     super(); 
     this.state={ 
     details=[ 
      {'id':1,'name':'x',age:'25'}, 
      {'id':2,'name':'y',age:'26'}, 
      ] 
     } 
    } 

     _getDetails() { 
       return this.state.details.map((content)=>{ 
        return (
        <Child key={content.id} name={content.name} age={content.age}/> 
        ); 
       }); 
     } 
} 

В выше ребенке является компонентом, в котором вы передаете подпорки.

Answer 3

Поскольку вы используете выражение (вместо жестко запрограммированных/предварительно сконфигурированных дочерних элементов), и поскольку выражение получает оценку массива, React считает, что это компонент с динамическими дочерними элементами, и поэтому он начинает предупреждать вас это сообщение.

И, думая больше об этом, это имеет смысл. Поскольку в отношении «Реакт» нет ничего, что мешает вам модифицировать этот массив и ожидать, что выражение будет разрешено для другого набора данных. Поэтому он считает, что это компонент с динамическими детьми.

Answer 4

С моей точки зрения, маршруты отображаются только один раз и не являются динамическими, хотя я использую массив.

Несмотря на то, что <Router> будет выдавать только один раз, он по-прежнему является компонентом React и не знает, что он «будет только один раз отображать». Компонент должен быть готов к «повторной обработке» и делать это эффективно.

Чтобы убедиться, что компонент рендеринга эффективно, он запрашивает эти «клавиши».

---

Вы можете перестать читать мой ответ здесь, но если вы хотите, чтобы построить больше интуиции вокруг него, продолжайте читать :)

Представьте, что вы видели вор ворует старо-леди кошелек ...

Полиция вводит вас, чтобы выявить плохого парня в линейке. За пределами очереди выходят 8 подозреваемых. Офицер вмещает первых 6 подозреваемых в комнату. Остальные 2 ждут снаружи из-за проблем с пропускной способностью.

Каждый из них имеет идентификационную метку (ключ). Вы внимательно посмотрите на каждого из них и запишите на листе бумаги свои идентификаторы.Вам все еще нужно видеть других 2 подозреваемых, но по закону, в комнате с номером всегда должно быть 6 человек. Это означает, что 4 из тех, которые вы только что видели, останутся в линейке.

Поскольку вы очень умны и записываете идентификатор подозреваемых, на которых вы уже смотрели (смотрите = рендер), вы можете пропустить просмотр подозреваемых, идентификатор которых уже находится в вашем списке.

Я знаю, что это странно пример, но я надеюсь, что это помогает :)

Если вы хотите больше деталей, то Реагировать документы являются хорошим местом для начала: https://facebook.github.io/react/docs/reconciliation.html#list-wise-diff