小编Wil*_*iam的帖子

在所有节点表达教程中,我读过以下语法用于创建公共目录:

var path = require('path');
app.use(express.static(path.join(__dirname, 'public')))

但是以下工作正常:

app.use(express.static('public'))

那么我为什么要使用路径模块呢？

编辑。我重写了代码，使其更加简约。下面的代码是我的问题的尖峰测试。

这是该问题的视频：

https://i.stack.imgur.com/EhItK.jpg

我有两个组件。

第一个组件名为 TextEditor（它是一个文本编辑器），但其内容无关 - 该组件可以是任何东西。一个带有文本的简单 div 也同样相关。

下一个组件名为 Workflows，用于渲染 IndexDB 中的集合（使用 Dexie.js 库）。我将此集合命名为“工作流”，并将它们存储在其中的状态变量命名为workflows_list_array

我想做的是：

页面加载时，我想检查是否有任何工作流程具有特定的 ID 。如果是，我将它们存储在工作流列表数组中并渲染它们。这部分我不需要帮助。

但是，如果不存在符合上述条件的工作流，我想隐藏名为 Workflows 的组件并呈现名为 TextEditor 的组件。如果工作流程确实存在，我希望隐藏文本编辑器并显示工作流程

问题是，即使我让它工作，当工作流确实存在时（填充工作流列表数组时），文本编辑器在隐藏之前会短暂“闪烁”，然后显示工作流组件。

我知道这是一个异步问题，但我不知道如何解决它。

我在下面发布了代码，并尝试将其保持在最低限度。

测试.js

import React, {useState, useEffect} from "react";
import db from "../services"

function Workflows(props){
    return (

          <div>
             <ul>
               {
                props.workflows.map((val,index)=>{

                     return <li key={index}>{val.content}</li>
                })
               }
             </ul>
          </div>
    )
}


function TextEditor(){

    return (

          <div> TextEditor </div>
    )
}


function Test(props){
   let [workflows_list_array, set_state_of_workflows_list_array] = useState([]);

   let [client_id_number, set_client_id_number] = useState(5);
      useEffect(() …

我有一个ID为"orangeButton"的div,每次点击它都会创建一个新的div.这工作正常,但...我希望每个新创建的div都有一个增加的数字添加到它的ID.

我不知道该怎么做.

这是我到目前为止的评论的代码.

http://jsfiddle.net/taoist/yPrab/1/

谢谢

Javascript代码

   var applicationArea = document.getElementById("applicationArea");
    var orangeButton = document.getElementById("orangeButton");


    orangeButton.onclick = function() {
      var newDivThingy = document.createElement("div");
      newDivThingy.id  = 'newDivThingy';  // I want each newly created div to have a      numeric value concatenated to it's ID. IE newDivThingy1 newDivThingy2 newDivThingy3
      applicationArea.appendChild(newDivThingy);


    };?

我正在使用网络音频 API 进行这个小实验，我希望垂直轴影响振荡器的增益值（参见下面的小提琴）。我需要将画布顶部到画布底部之间的值缩放到 0 和 1 之间的值，以便 Y 轴上的鼠标移动事件在听觉上影响增益。我认为这是一个一般数学问题，可以应用于任何数字范围，但我只是不知道该怎么做。

http://jsfiddle.net/63Y54/

var audioContext = new webkitAudioContext();



oscillator = undefined ;

$("#myCanvas").mousedown(function() {
    var osc = audioContext.createOscillator(); 
    gainNode = audioContext.createGainNode();
    oscillator = osc;
    oscillator.start(0);

});


$("#myCanvas").mouseup(function() {
    oscillator.stop();
});



$("#myCanvas").mousemove(function(event) {
    console.log(event.pageX);
    console.log(event.pageY);
    oscillator.type = "sawtooth";
    gainNode.gain.value = (event.pageX);
    oscillator.connect(gainNode); 
    gainNode.connect(audioContext.destination); 
    oscillator.frequency.value = event.pageX;


});

我读到的关于节点EventEmitters的每篇文章都讨论了如何创建它们.但是,我还没有看到为什么要使用它们而不仅仅是一个简单的函数的具体示例.例如,这是一本书中的一个例子,我正在阅读如何通过其构造函数在自定义对象上使用EventEmitter类.

    var util = require('util');
    var events = require('events');
    var AudioDevice = {
        play: function(track) {
            // Stub: Trigger playback through iTunes, mpg123, etc.
            console.log("playing song: " + track);
        },
        stop: function() {
            console.log("song stopped");
        }
    };

    function MusicPlayer() {
        this.playing = false;
        events.EventEmitter.call(this);
    }

    util.inherits(MusicPlayer, events.EventEmitter);

    var musicPlayer = new MusicPlayer();

    musicPlayer.on('play', function(track) {
        this.playing = true;
        AudioDevice.play(track);
    });

    musicPlayer.on('stop', function() {
        this.playing = false;
        AudioDevice.stop();
    });

    musicPlayer.emit('play', 'The Roots - The Fire');

    setTimeout(function() {
        musicPlayer.emit('stop');
    }, 1000);

但是,以下给出了相同的结果: …

我认为这个问题的答案是否定的,但我不确定.下面是一个reduce函数,一个不使用箭头函数,一个是.是否可以将第一个参数合并到箭头样式中？

var s = arr.reduce(function(){

},0) // includes second argument

和........

var a = arr.reduce = () => {

} // ?

我正在使用图表列表。http://fraserxu.me/react-chartist/

数据显示不正确。数据显示如下：

根据文档，它应该显示如下：

这是每个文档的代码： http: //fraserxu.me/react-chartist/

这是我的代码：

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";



class PreBuy extends Component {


    render() {


        var simpleLineChartData = {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            series: [
                [12, 9, 7, 8, 5],
                [2, 1, 3.5, 7, 3],
                [1, 3, 4, 5, 6]
            ]
        }

        let style = {
            height: 400,
            position: "relative",
            top: 300
        }

        return (

            <section>
            <div style={style}>
                  <ChartistGraph data={simpleLineChartData} type={'Line'} />

            </div>




          </section>

        )

    }
} …

我想按住鼠标并将光标更改为图像.然后,当我释放鼠标时,我希望它重新恢复默认值.

这是我到目前为止的代码.除非您右键单击然后左侧mousedown,否则它不起作用.奇怪的.

http://jsfiddle.net/HLLNN/

JQUERY

$("#background").on("mousedown", function () {
    $(this).addClass("mouseDown");
}).on("mouseup", function () {
    $(this).removeClass("mouseDown");
});

CSS

.mouseDown{
 cursor:progress  ; // I will eventually want an image file but I used this for brevity

}


#background{
    width:500px;
    height:500px;
    position:absolute;
    background-color:red;
}

我在 create-react-app 中编写了类似于以下内容的代码，我想知道 next.js 的等效代码。下面的代码是我尝试拥有一个可用于所有页面的全局上下文。提供者包装链接。我没有错误。问题出在about页面中，当我期望 Context 状态时，console.log(state) 返回 undefined。我该如何解决？

谢谢你。

页面/index.js

import Link from "next/link";
import {Provider} from './Context';





function Index(){


    return(

        <div>
         <Provider>
          <ul>
             <li><Link href="/"><a>Home</a></Link></li>
             <li><Link href="/about"><a>About</a></Link></li>
          </ul>
          </Provider>
        </div>

    )
}

export default Index;

页面/about.js

import { useRouter } from 'next/router';
import {Context} from './Context';
import {useContext} from 'react';



const About= () => {

 const data = useContext(Context);
 console.log(data)

  return (
    <div>


      <p>This is the blog post content.</p>

    </div>
  );
};

export default About;

页面/Context.js …

我想对分配给占位符属性的文本进行样式设置并使其字体大小更大。我如何使用 ReactQuill 做到这一点？

          <ReactQuill placeholder= "some fun text" onChange = {onContentChange} value={contentValue} theme="snow" style={{

            height:"300px",
            padding:"20px",
            lineHeight:"0px",

          }}/>