javascript 通过props从颜色代码中检测颜色类型并呈现jsx

3wabscal 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(182)

请我需要能够显示一个表格单元格的颜色。我有代码存储在mongodb沿着说明。我需要一个库，可以检测是否rgb或十六进制从颜色代码提供的 prop 和渲染。

如上所示，我希望颜色字段显示代码字段中指定的颜色。即使我没有得到一个库来检测颜色，我也很感激。我不介意做一些繁重的工作。到目前为止，这是我的代码的样子。

const ColorList = () => {
  const dispatch = useDispatch();
  const { user } = useSelector((state) => state.auth);
  React.useEffect(() => {
    dispatch(getColors(user?.refreshToken));
  }, [dispatch]);
  const { colors } = useSelector((state) => state.color);
  return (
    <div className="container-xxl">
      <div className="row">
        <div className="col-12">
          <table className="table table-striped table-hover table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Code</th>
                <th scope="col">Color</th>
              </tr>
            </thead>
            <tbody>
              {colors.map(({ color, name }, index) => (
                <tr key={index}>
                  <th scope="row">{index + 1}</th>
                  <td>{name}</td>
                  <td>{color}</td>
                  <td>
                    <span
                      style={{
                        backgroundColor: { color },
                        width: "6px",
                        height: "2px",
                      }}
                    ></span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

JavaScript

来源：https://stackoverflow.com/questions/75679048/detect-color-type-from-color-code-via-props-and-render-jsx

1条答案

按热度按时间

y1aodyip1#

问题是如何将值放入backgroundColor中。您可以选择像数组或单个字符串（"217,22,3"或使用代码值rbg(217,22,3)）那样存储颜色代码，然后拆分字符串
更新版本：

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const colors = [{ name: "name", code: "rgb(217,22,3)", color: [217, 22, 3] }];

  return (
    <div className="App">
      <table className="table table-striped table-hover table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Code</th>
            <th scope="col">Color</th>
          </tr>
        </thead>
        <tbody>
          {colors.map((color, index) => (
            <tr key={index}>
              <th scope="row">{index + 1}</th>
              <td>{color.name}</td>
              <td>{color.code}</td>
              <td>
                <span
                  style={{
                    backgroundColor: `rgb(${color.color[0]}, ${color.color[1]}, ${color.color[2]})`,
                    display: "inline-block", // span needs a content to have non zero height
                    width: "6px",
                    height: "10px"
                  }}
                ></span>
                <div
                  style={{
                    backgroundColor: `rgb(${color.color[0]}, ${color.color[1]}, ${color.color[2]})`,
                    width: "6px",
                    height: "10px"
                  }}
                ></div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

您可以在这里找到实时代码：https://codesandbox.io/s/colortest-8w777x?file=/src/App.tsx

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 通过props从颜色代码中检测颜色类型并呈现jsx

1条答案

相关问题

热门标签

最新问答