Question

第一次在这里发布。我正在尝试在组件内部显示“骰子卷”的结果。据我了解，当您想在HTML中显示Javascript时，请将其包装在{}中。它适用于2 + 2之类的文字。或独立变量，如let x = 2 + 2。但是，尝试从函数中抽出一块来插入它似乎是一个问题吗？我上周开始学习所有这些内容，很抱歉您必须为此喂饭。

我尝试将输出的数字转换为字符串并返回。（这仍在代码中。）我试过将此组件作为函数而不是类运行。我尝试过为onClick使用内联函数。我试过将函数移到返回值的下面和里面。我试过将函数保留在其自己的组件中，并将结果导入此Dice组件，然后将其路由到app.js 我试过使用状态，但是我不确定该如何工作，只能将它们用于对象数组。计划稍后再学习。我已经在函数内部返回了“ test”和“ D20RollValue”。我试过不使用这个。而且我查阅了其他教程和示例，说明了这种方法应该如何工作。

import React from "react"

class Dice extends React.Component {
  render() {
    // Dice Rolling
    function D20Click() {
      let D20RollValue = Math.floor(Math.random() * 21)
      const test = "Rolled " + D20RollValue
      console.log(test)
    }
    return (
      <div className="D20Container">
        <button className="RollD20Button" onClick={D20Click}>
          Roll D20
        </button>
        <p>Insert Result Here: {this.D20RollValue}</p>
      </div>
    )
  }
}

export default Dice

它在console.log中工作，当使用test的类型和D20RollValue时，它们分别显示字符串和数字，因此可以正常工作。但是this.D20RollValue和this.test根本不显示任何内容。就像它们被跳过了一样，在控制台中也没有错误弹出。

希望我正在正确设置此帖子的格式。

Answer 1

您需要将D20RollValue添加到组件的状态，然后在单击时进行设置：

import React from "react"

class Dice extends React.Component {
  constructor(props) {
    super(props);

    this.state = {D20RollValue: 0}
  }

   // Dice Rolling
    D20Click = () => {
      let D20RollValue = Math.floor(Math.random() * 21)
      const test = "Rolled " + D20RollValue
      console.log(test)
      this.setState({D20RollValue: D20RollValue});
    }

  render() {
    return (
      <div className="D20Container">
        <button className="RollD20Button" onClick={this.D20Click}>
          Roll D20
        </button>
        <p>Insert Result Here: {this.state.D20RollValue}</p>
      </div>
    )
  }
}

export default Dice

编辑：您还需要从渲染中移出骰子滚动功能。

Answer 2

您的问题是D20RollValue是您无法在外部使用的函数中的局部变量。还有另一种解决方案可以帮助您。

var express = require("express");
var router = express.Router();
var builder = require("xmlbuilder");
const https = require("https");

var parkingData;
var levelData;

router.get("/", function(req, res) {
  try {
    //const url = 'https://insights.parkassist.com/sites/santana-row/status/v2/zones.json';
    const url =
      "https://api-prismview:S8EPh8xaStaXApum@api.parkassist.com/santana-row/v2/zones.json";
    https.get(url, httpsRes => {
      httpsRes.setEncoding("utf8");
      let body = "";
      httpsRes.on("data", data => {
        body += data;
      });
      httpsRes.on(
        "end",
        function() {
          console.log("running function");
          bodyJSON = JSON.parse(body);
          console.log("bodyJson", bodyJSON);
          parkingData = bodyJSON;
          for (let i = 0; i < parkingData.length; i++) {
            levelData = builder
              .create("levels", { encoding: "utf-8" })
              .ele("level")
              .ele("id", parkingData[i].id)
              .up()
              .ele("name", parkingData[i].name)
              .up()
              .ele("counts")
              .ele("available", parkingData[i].counts.available)
              .up()
              .ele("occupied", parkingData[i].counts.occupied)
              .up()
              .ele("out_of_service", parkingData[i].counts.out_of_service)
              .up()
              .ele("reserved", parkingData[i].counts.reserved)
              .up()
              .ele("timestamp", parkingData[i].counts.timestamp)
              .up()
              .ele("total", parkingData[i].counts.total)
              .up()
              .ele("vacant", parkingData[i].counts.vacant)
              .up()
              .up()
              .up()
              .end();
          }
          res.set("Content-Type", "text/xml");
          res.send(levelData);
        }.bind(this)
      );
    });
  } catch (error) {
    console.log(error);
  }
});

module.exports = router;

ReactJS-我的骰子卷结果不会显示吗？

2 个答案: