Визуализируйте один и тот же компонент с разными деталями каждый раз

Question

Я хочу одно и то же сообщение с другим URL, основанное на пропе.В основном у меня есть метод рендеринга ниже, который я вызываю внутри моего основного.

  renderNoBasicMode = () => {
    const { securityMode } = this.props;
    // Need this, while isFetching securityMode === '',
    // Unless, we don't this is rendering on multipel renders.
    if (securityMode !== SecurityMode.BASIC && securityMode !== SecurityMode.EMPTY) {
      return (
        <div className="badge badge-light" data-test="non-basic-mode">
          <NoResource
            icon="user-o"
            title="Non Basic Security Mode"
            primaryBtn="New User"
            primaryCallback={this.openCreateUserModalPromise}
            moreUrl={NonBasicSecurityMode.url}
          >
            No users available when Lenses is running on {securityMode} security mode.
          </NoResource>
        </div>
      );
    }
    return null;
  };

И я хочу отобразить другой URL, основанный на значении NonBasicSecurityMode, который у меня здесь:

const NonBasicSecurityMode = [
  { securityMode: 'mode1', url: 'https://...' },
  { securityMode: 'mode2', url: 'https://...' },
  { securityMode: 'mode3', url: 'https://...' }
];

SecurityMode, это запрос от API.

export const securityModeSelector = createSelector(
  lensesConfigSelector,
  config => (config.&& config['security.mode']) || ''
);

function mapStateToProps(state) {
  return {
    securityMode: securityModeSelector(state),
  };
}

По сути, я попытался отобразить их, и forEach, но я был явно неправ.Можете ли вы помочь мне понять это?Спасибо !!

Answer 1

Давайте предположим более общий набор данных:

const data = [{name:'Eduardo'},{name:''},{name:'Fabrizio'},{name:'Paulo'}]

Теперь для рендеринга списка с именами:

render(){
   const items = data.map(item => (<li>{item.name}</li>)) 
   return(
        <ul>{items}{</ul>     
   )
}

Если вы хотите, чтобы один элемент каждый раз рассматривал маршрутизацию или условный рендеринг