时间戳

首页 > 解决方案 > 我不知道如何更改模态的状态

javascript - 我不知道如何更改模态的状态

问题描述

早上好，我在一个 React 和 JS 项目中，我还在学习 React，有些事情很难做到，我有一个小问题，我无法取得任何进展。

对于所有结果，我有一个带有一种颜色的模态，但有人告诉我，根据结果，有必要显示一种颜色或另一种颜色。我在 Modal 组件中以这种方式定义了它：

const headerModal = {
    0: "modal-error", //red
    1: "modal-ok",    //green
  };

在另一个组件中，我有什么会进入 kata，所有具有 className "statusKata" 的东西都应该带有 headerModal={1} 和带有 headerModal={0} 的 "Not started" 但我不知道如何实现它，代码如下：

import React from 'react';

const DetailUserKata = (props) => {
  return (
    <>
    {!props.statusKata ? 
      <div>Obteniendo datos...</div> : 
      props.statusKata.length ? 
        <div>
          <div className="statusKata"><label>Autor: </label> {props.statusKata[0].author_login_txt}</div>
          <div className="statusKata"><label>Cuenta de GitHub: </label> {props.statusKata[0].autor_github_url}</div>
        </div> :
        <div>Not started</div>
    }
    </>
  );
}

export default DetailUserKata;

首先，在显示模态的页面中，我将其设置为如下所示，header={1} 为绿色（modal-ok），但我必须更改它：

<Modal show={showKata} handleClose={hideModalKata} header={1} title="Detalles de la kata">
        {<DetailUserKata statusKata={detail} />}
</Modal >

提前致谢！并且随时欢迎任何有关更改或帮助的反馈。

标签： javascriptreactjs

解决方案

用你想要的颜色替换green和red

import React from 'react';

const DetailUserKata = (props) => {
  return (
    <div style={{background-color: props.header === headerModal[1] ? 'green' : 
                                     props.header === headerModal[0] ? 'red' :''}
    }>
    {!props.statusKata ? 
      <div>Obteniendo datos...</div> : 
      props.statusKata.length ? 
        <div>
          <div className="statusKata"><label>Autor: </label> {props.statusKata[0].author_login_txt}</div>
          <div className="statusKata"><label>Cuenta de GitHub: </label> {props.statusKata[0].autor_github_url}</div>
        </div> :
        <div>Not started</div>
    }
    <div/>
  );
}

export default DetailUserKata;

并将header道具移动到DetailUserKata

<Modal show={showKata} handleClose={hideModalKata} title="Detalles de la kata">
        {<DetailUserKata statusKata={detail} header={headerModal[1]}  />}
</Modal >

推荐阅读