Question

我希望基于道具，使用不同的URL发送相同的消息。我基本上有下面的render方法，在我的主要方法中调用。

  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;
  };

我想根据NonBasicSecurityMode的值显示一个不同的url，我在这里：

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>     
   )
}

如果每次需要一个元素，请查看路由或条件渲染

每次渲染具有不同细节的相同组件

1 个答案: