如何根据条件改变反应样式

Question

​

import "./index.scss";
import { BsInfoCircleFill } from "react-icons/bs";
import { BsCheckCircleFill } from "react-icons/bs";
import { MdOutlineWarning } from "react-icons/md";

function Alert(props) {
  if (props.icon === <BsInfoCircleFill />) {
    
  }
  return (
    <div className="alert-box">
      <div className="alert-info">
        <h3>{props.icon}</h3>
        <p>{props.message}</p>
      </div>
    </div>
  );
}

export default Alert;

​

我基本上想要添加/更改警报框的颜色，取决于所显示的图标，我尝试了几种方法，但都没有效果。我已经附加了组件代码和app.js文件。

​

import Alert from "./Alert";
import "./index.scss";

import { BsInfoCircleFill } from "react-icons/bs";
import { BsCheckCircleFill } from "react-icons/bs";
import { MdOutlineWarning } from "react-icons/md";

function App() {
  return (
    <div className="App">
      <div className="main">
        <Alert icon={<BsInfoCircleFill />} message="blah blah blah" />

        <Alert icon={<BsCheckCircleFill />} message="blah blah blah" />
        <Alert icon={<MdOutlineWarning />} message="blah blah blah" />
        <Alert icon={<MdOutlineWarning />} message="blah blah blah" />
      </div>
    </div>
  );
}

export default App;

​

Answer 1

看来，此警报组件是您自己的组件。在这种情况下，您将额外的道具传递到app.js中的每个警报中，然后在Alert组件中执行条件样式化。

Answer 2

使用if语句，这就是反应的魔力。例如：

import "./index.scss";

import { BsInfoCircleFill } from "react-icons/bs";
import { BsCheckCircleFill } from "react-icons/bs";
import { MdOutlineWarning } from "react-icons/md";

function App() {
    if (/* considiton here */) {
        return (
            <div className="App">
                <div className="main">
                    <Alert icon={<MdOutlineWarning />} message="blah blah blah" />
                </div>
            </div>
        );
    } else if ( /* another condition */ ) {
        return (
            <div className="App">
                <div className="main">
                    <Alert icon={<MdOutlineWarning />} message="blah blah blah" />
                </div>
            </div>
        );
    }
}

export default App;

设置条件取决于您，您可以根据当前活动的内容设置react状态变量，然后根据这些状态变量执行不同的操作。