ReactJS：列表中的每个 child 都应该有一个唯一的 "key" 道具

Question

解决此类问题的最佳方法是什么？

我正在尝试将 Link (react-router-dom) 用于 ReactJS，一个按钮将重定向到另一个页面“DadosEmpresaPage”到“SelecaoPlaenoElegibilidade”，但它在我的 ComponentSelector 中给出了一个错误，现在它已修复，我只需要以某种方式制作一个“列表”来呈现我的组件？

我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// Materialize
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.js';

// Component Dynamic Render Selector
import ComponentSelector from './components/ComponentSelector/ComponentSelector';

const ComponentList = ['NavigationBar', 'Breadcrumbs', 'DadosEmpresaPage'];

ReactDOM.render(
  <React.StrictMode >

    <ComponentSelector Render={ComponentList} />

  </React.StrictMode>,
  document.getElementById('root')
);

我的ComponentSelector.js

// React
import React from 'react';

// Componentes
import HomePage from '../../pages/HomePage/HomePage';
import NavigationBar from '../../components/NavigationBar/NavigationBar';
import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
import DadosEmpresaPage from '../../pages/DadosEmpresaPage/DadosEmpresaPage';
import InformacoesComplementaresPage from '../../pages/InformacoesComplementaresPage/InformacoesComplementaresPage';
import ElegibilidadePage from '../../pages/ElegibilidadePage/ElegibilidadePage';
import SelecaoPlanoElegibilidadePage from '../../pages/SelecaoPlanoElegibilidadePage/SelecaoPlanoElegibilidadePage';
import DistribuicaoFaixasElegibilidadePage from '../../pages/DistribuicaoFaixasElegibilidadePage/DistribuicaoFaixasElegibilidadePage';
import GerarPropostaPage from '../../pages/GerarPropostaPage/GerarPropostaPage';

const componentMapping = {
  HomePage,
  NavigationBar,
  Breadcrumbs,
  DadosEmpresaPage,
  InformacoesComplementaresPage,
  ElegibilidadePage,
  SelecaoPlanoElegibilidadePage,
  DistribuicaoFaixasElegibilidadePage,
  GerarPropostaPage
};

const ComponentRender = ({ Render }) => {
  return (
    <div>
      {Render.map((componentName) => {
        const Component = componentMapping[componentName];
        return <Component />;
      })}
    </div>
  );
};

export default ComponentRender;

我的DadosEmpresaPage.js

import React from 'react';
import './DadosEmpresaPage.css';
import StepCounter from '../../components/StepCounter/StepCounter';
import HeaderPage from '../../components/PageHeader/PageHeader'
import { Link } from "react-router-dom";

export default class DadosEmpresaPage extends React.Component {

  state = {

  }


  componentDidMount() {


  }

  render() {
    return (
      <div>
        <div className='row container'>
          <div className='col s9 m9 l9'>
            <br /><b><h5>Nova Oportunidade</h5></b>
          </div>
          <div className='col s3 m3 l3'>
            <br /><StepCounter step='1' total='4' />
          </div>
        </div>
        <div className='row container'>

          <HeaderPage Spotlight='Dados' Title='da Empresa' Description='Para iniciar a nova oportunidade, preencha ao lado os dados cadastrais da empresa, informe a quantidade de pessoas que farão parte do plano, assim como o número de titulares.' />

          <div className='col s5 m5 l5 offset-s3 offset-m3 offset-l3'>

            <div class="input-field col s12">
              <label for="cnpj">CNPJ</label>
              <input id="cnpj" type="text" name="cnpj" onChange={this.onChange} />
            </div>

            <div class="input-field col s12">
              <label for="razaoSocial">Razão Social</label>
              <input id="razaoSocial" type="text" name="razaoSocial" onChange={this.onChange} />
            </div>

            <div class="input-field col s12">
              <label for="estado">Estado</label>
              <input id="estado" type="text" name="estado" onChange={this.onChange} />
            </div>

            <div class="input-field col s12">
              <label for="cidade">Cidade</label>
              <input id="cidade" type="text" name="cidade" onChange={this.onChange} />
            </div>

            <div class="input-field col s12">
              <label for="quantidadeVidas">Quantidade de Vidas</label>
              <input id="quantidadeVidas" type="text" name="quantidadeVidas" onChange={this.onChange} />
            </div>

            <div class="input-field col s12">
              <label for="quantidadeTitulares">Quantidade de Titulares</label>
              <input id="quantidadeTitulares" type="text" name="quantidadeTitulares" onChange={this.onChange} />
            </div>

            <Link  to={{pathname: '/InformacoesComplementaresPage'}}>NavigateNow</Link>
            </div>

          </div>

        </div>
    );
  }
};

Answer 1

您映射到的组件需要一个唯一的 React 密钥用于 React 的协调过程。使用 componentName 值作为 React 键，因为大概它们在 componentMapping 对象中足够独特。

const ComponentRender = ({ Render }) => {
  return (
    <div>
      {Render.map((componentName) => {
        const Component = componentMapping[componentName];
        return <Component key={componentName} />;
      })}
    </div>
  );
};

Answer 2

在 React 中渲染列表时，你应该给每个元素一个唯一的键标识符。

解决它的最快方法之一是使用索引作为键。

const ComponentRender = ({ Render }) => {
  return (
    <div>
      {Render.map((componentName, index) => {
        const Component = componentMapping[componentName];
        return <Component key={index} />;
      })}
    </div>
  );
};

但是如果您想添加/删除元素或打乱顺序，请考虑这种确切的方式（提供索引作为键）可能不适合您。然后使用其他一些唯一且不可更改的值作为键将解决您的问题。

ReactJS：列表中的每个 child 都应该有一个唯一的 "key" 道具

ReactJS: Each child in a list should have a unique "key" prop

components

reactjs

react-router-dom