将文件中的对象属性随机分配给内联 CSS

2020-09-03 08:00:00 · 飞浪

介绍在使用React开发基于浏览器的应用或游戏时，随机结果生成是一个日常用例。它可能涉及掷骰子、洗牌或任何其他类似的游戏。在本指南中，您将学习如何随机生成对象中属性的值并将其分配为R

介绍

在使用 React 开发基于浏览器的应用或游戏时，随机结果生成是一个日常用例。它可能涉及掷骰子、洗牌或任何其他类似的游戏。

在本指南中，您将学习如何随机生成对象中属性的值并将其分配为 React 组件中的 prop。

从对象获取随机键

首先在randomStyles.js文件中创建一个样式对象。此样式对象将具有随机选择的不同样式对象。

      const styles = {
  style1: {
    color: "#707cff",
    fontWeight: "bold",
    fontSize: 30,
  },
  style2: {
    color: "#3ef059",
    background: "#000",
  },
  style3: {
    color: "#fff",
    background: "#c73bed",
    borderRadius: 6,
  },
};
    

接下来，创建一个名为getRandomStyle的导出函数，该函数将从样式对象中选择一个随机属性。在函数名称前添加导出关键字将允许代码库中的其他文件导入和访问该函数。

      export const getRandomStyle = () => {
  var keys = Object.keys(styles);
  return styles[keys[(keys.length * Math.random()) << 0]];
};
    

将对象分配给样式道具

使用组件文件顶部的import语句导入getRandomStyle函数，如下所示。

      import { getRandomStyle } from "./randomStyle";
    

然后调用该函数并存储随机样式，如下所示。

      const randomStyle = getRandomStyle();

使用对象解构，将默认样式与随机样式合并。

      <span style={{ ...defaultStyle, ...randomStyle }}>Hello World</span>

现在您已经清楚了解如何使用函数获取随机样式对象，请创建一个 React 组件并使用 randomStyle ()函数。

您可以将默认样式 props 存储在组件的状态中，当组件挂载到页面上时，这些 props 将立即应用。创建一个按钮，它将触发 randomizeStyle ()方法并在状态中设置新的随机样式。

      import React, { Component } from "react";
import "./styles.css";
import { getRandomStyle } from "./randomStyle";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      defaultStyle: {
        padding: 10,
        fontSize: 20,
      },
      randomStyle: {},
    };

    this.randomizeStyle = this.randomizeStyle.bind(this);
  }

  randomizeStyle() {
    const randomStyle = getRandomStyle();
    this.setState({ randomStyle });
  }

  render() {
    const { defaultStyle, randomStyle } = this.state;
    return (
      <div className="App">
        <span style={{ ...defaultStyle, ...randomStyle }}>Hello World</span>
        <div class="btn">
          <button onClick={this.randomizeStyle}>Randomize</button>
        </div>
      </div>
    );
  }
}
    

就是这样。所有随机获取值的逻辑都写在单独的文件中，因此在 React 组件中，您所要做的就是使用该函数并将值分配给 props。

如果您不想使用对象解构，您可以使用 Object.assign ()函数合并defaultStyle和randomStyle对象。

      const style = Object.assign(defaultStyle, randomStyle);
    

基于 Hook 的实现

现在是时候看看使用 React hooks 的替代解决方案了。与类组件类似，在这里您也可以在组件文件之外生成随机样式。但在这种情况下，它将采用自定义 hook 的形式。

创建一个名为useRandomStyle的函数，它将生成样式并返回生成新随机样式的函数。请注意，由于它是一个自定义钩子，因此习惯上在函数名称前加上“use”前缀，后跟表明钩子用途的名称 — 在本例中为“RandomStyle”。

      import { useState } from "react";

const useRandomStyle = () => {
  const styles = {
    style1: {
      color: "#707cff",
      fontWeight: "bold",
      fontSize: 30,
    },
    style2: {
      color: "#3ef059",
      background: "#000",
    },
    style3: {
      color: "#fff",
      background: "#c73bed",
      borderRadius: 6,
    },
  };

  const [activeStyle, setActiveStyle] = useState({});

  const getRandomStyle = () => {
    var keys = Object.keys(styles);
    return styles[keys[(keys.length * Math.random()) << 0]];
  };

  const setRandomActiveStyle = () => {
    const style = getRandomStyle();
    setActiveStyle(style);
  };

  return [activeStyle, setRandomActiveStyle];
};

export default useRandomStyle;
    

自定义钩子必须返回一个数组，该数组应包含值和可以改变该值的函数；在本例中，值是样式对象，函数是setRandomActiveStyle。

然后，在App组件内部，调用useRandomStyle函数，如下所示。

      import React from "react";
import "./styles.css";

import useRandomStyle from "./useRandomStyle";

export default function App() {
  const defaultStyle = {
    padding: 10,
    fontSize: 20,
  };

  const [randomStyle, setRandomStyle] = useRandomStyle();

  return (
    <div className="App">
      <span style={{ ...defaultStyle, ...randomStyle }}>Hello World</span>
      <div class="btn">
        <button onClick={setRandomStyle}>Randomize</button>
      </div>
    </div>
  );
}
    

请注意，此实现比类组件更简洁且更易于阅读。

结论

随机化结果乍一看似乎很困难，但其实只需使用正确的方法和实现逻辑即可。有趣的事实：使用算法生成的随机数或结果并不是真正随机的。由于使用算法函数生成的数字在真正意义上不能是随机的，因此它们被称为伪随机数。

这就是本指南的全部内容。继续探索随机数及其用例。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

将文件中的对象属性随机分配给内联 CSS

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const styles = { style1: { color: "#707cff", fontWeight: "bold", fontSize: 30, }, style2: { color: "#3ef059", background: "#000", }, style3: { color: "#fff", background: "#c73bed", borderRadius: 6, }, };

import React, { Component } from "react"; import "./styles.css"; import { getRandomStyle } from "./randomStyle"; class App extends Component { constructor(props) { super(props); this.state = { defaultStyle: { padding: 10, fontSize: 20, }, randomStyle: {}, }; this.randomizeStyle = this.randomizeStyle.bind(this); } randomizeStyle() { const randomStyle = getRandomStyle(); this.setState({ randomStyle }); } render() { const { defaultStyle, randomStyle } = this.state; return ( <div className="App"> <span style={{ ...defaultStyle, ...randomStyle }}>Hello World</span> <div class="btn"> <button onClick={this.randomizeStyle}>Randomize</button> </div> </div> ); } }

import { useState } from "react"; const useRandomStyle = () => { const styles = { style1: { color: "#707cff", fontWeight: "bold", fontSize: 30, }, style2: { color: "#3ef059", background: "#000", }, style3: { color: "#fff", background: "#c73bed", borderRadius: 6, }, }; const [activeStyle, setActiveStyle] = useState({}); const getRandomStyle = () => { var keys = Object.keys(styles); return styles[keys[(keys.length * Math.random()) << 0]]; }; const setRandomActiveStyle = () => { const style = getRandomStyle(); setActiveStyle(style); }; return [activeStyle, setRandomActiveStyle]; }; export default useRandomStyle;

import React from "react"; import "./styles.css"; import useRandomStyle from "./useRandomStyle"; export default function App() { const defaultStyle = { padding: 10, fontSize: 20, }; const [randomStyle, setRandomStyle] = useRandomStyle(); return ( <div className="App"> <span style={{ ...defaultStyle, ...randomStyle }}>Hello World</span> <div class="btn"> <button onClick={setRandomStyle}>Randomize</button> </div> </div> ); }