小编Era_hel的帖子

React - 将json中的所有数据加载到组件中

我正在使用React并尝试从本地json文件将数据加载到我的组件中.我试图打印所有信息,包括名称中的'name':值对(不仅仅是值)使它看起来像一个表单.

我正在寻找最好的方法来做到这一点.我需要解析吗？我需要使用地图功能吗？我是React的新手,请告诉我代码解决方案.我已经看到了类似的其他问题,但它们包含了许多我认为不需要的其他代码.

我的代码示例:test.json

"person": {
  "name": John,

  "lastname": Doe,
  "interests": [
    "hiking",
    "skiing"
  ],
  "age": 40
}

Run Code Online (Sandbox Code Playgroud)

test.js

import React, {Component} from 'react';

class Test extends Component {
    render () {
      return (

           ) 
      }
};

export default Test;

Run Code Online (Sandbox Code Playgroud)

我需要代码,让我从json和代码中导入显示所有字段的组件.

javascript parsing json reactjs

6
推荐指数

3
解决办法

2万
查看次数

Particles.js 作为仅特定部分的背景

我正在使用 Vincent Garreau 的 Particles.js（将链接但不能共享多个链接）在我网站的特定部分实现粒子效果背景。

<div id="particles-js" >

<section class="page-section features" >
<div class="container relative" >
     <div class=" font-alt hs-line-2 mb-30">
     <!-- Other relevant code for this section -->
     </div>
     </div> <!--end container div-->
     </section>
</div> <!-- End particles div>

Run Code Online (Sandbox Code Playgroud)

CSS

#particles-js {
  background-color: #000;
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;
}

.page-section {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: …

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery particles.js

5
推荐指数

1
解决办法

2375
查看次数

Docker上下文中使用的文件列表

假设我有一个包含多个项目的存储库,结构如下:

Root
 ??? bar
 ?   ??? Dockerfile
 ?   ??? index.js
 ??? baz
 ?   ??? Dockerfile
 ?   ??? index.js
 ??? foo
 ?   ??? Dockerfile
 ?   ??? index.js
 ??? shared
     ??? utils.js
     ??? shared.js

Run Code Online (Sandbox Code Playgroud)

的Foo,Bar并且Baz项目共享的一些库shared文件夹中.目前,我正在发送根文件夹,context以构建这三个Docker镜像以包含该shared文件夹.

为了增加构建时间并减少Docker镜像的部署时间,我需要获得context发送到这些图像的最小大小.

为此,我计划为每个将用作的图像创建一个临时文件夹context.事实是,我需要知道每个图像使用哪些共享文件.

在这个例子中,它很简单,因为共享文件很少,项目也很少.但实际上,有数百个共享文件和大约20个项目,我不想检查哪些项目使用了哪些共享文件.

这是我的一个例子Dockerfile:

FROM node:boron

RUN mkdir /app
WORKDIR /app

COPY package.json package.json
RUN yarn

COPY . .

RUN yarn release

CMD node release/server.js

Run Code Online (Sandbox Code Playgroud)

我用以下代码构建Docker镜像:

docker build -t …

Run Code Online (Sandbox Code Playgroud)

5
推荐指数

1
解决办法

3048
查看次数

属性“儿童”的类型缺失

我正在尝试使用babel-loader和ts-loader使用 Typescript 设置 Storybook 。

除了children在 React 组件中使用外，一切正常：

[tsl] ERROR in .../stories/index.stories.tsx(8,56)
      TS2769: No overload matches this call.
      Property 'children' is missing in type '{ title: string; }' but required in type 'Props'.

Run Code Online (Sandbox Code Playgroud)

这是.storybook/main.js文件：

module.exports = {
  addons: [
    "@storybook/addon-knobs",
  ],
  stories: ["../packages/**/*.stories.tsx"],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve('ts-loader')
        },
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }
        }
      ], …

Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs storybook

4
推荐指数

2
解决办法

8022
查看次数

Flowtype:可能的字符串数组不能为空？

如果我创建此Flow类型:

export type List = [
    'some' |
    'strings' |
    'allowed' |
    'to' |
    'use'
];

Run Code Online (Sandbox Code Playgroud)

我不被允许: const myList: List = [];

这是错误: empty array literal: This type is incompatible with a tuple type that expects a 1st element of non-optional type string enum

我唯一能想到的就是添加typeof undefined可能的值列表.但是必须有一种简单的方法让它变空？

3
推荐指数

1
解决办法

1956
查看次数

Chrome 扩展程序：在加载所有其他页面脚本后运行扩展程序的脚本

我正在开发一个 Chrome 扩展程序，我想在加载所有页面脚本后加载它。

网站页面包含这样的代码：

<html>
  <body>
  <div id="main">All body elements, texts, etc...</div>
  <script>
    window.netflix = window.netflix || {};
    netflix.falkorCache = {"genres":"58"}
  </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我的扩展代码是：

$(document).ready(function() {
  launchPlugin();

  function launchPlugin() {
    console.log(typeof(window.netflix));//I have also tried just `netflix`
    if(typeof(window.netflix)!=='undefined'){
      startNetflixPlayer();
    } else{
      setTimeout(
        function(){
          launchPlugin();
        }, 700);
    }
  }

  //other code...

});

Run Code Online (Sandbox Code Playgroud)

但插件永远不会运行，startNetflixPlayer()因为window.netflix总是undefined。我也尝试过检查变量netflix，但它也返回undefined。

同时，如果我尝试检查console.log(window.netflix)Chrome 的开发人员控制台，我会看到结果。 console.log(typeof(window.netflix))返回object。但是在这个 Chrome 扩展之后仍然看不到这个变量并返回undefined.

我相信我错过了一些简单的东西，但无法理解到底是什么。

有什么想法如何使用扩展程序的脚本从网站访问变量（和对象数据）？

PS我也检查了这个答案，但它对我不起作用： chrome扩展：在页面完成加载javascript后运行脚本

javascript google-chrome-extension

3
推荐指数

1
解决办法

3616
查看次数

如何在Chartjs中将Y轴值从浮点数更改为整数？

我想将Yaxis从实数更改为整数,这里是图像,请帮我解决这个问题

这是我的代码

var lineChartData = {
  labels: time,
  datasets: [{
    label: "S? ng??i ??ng kí ?ng h?",
    borderColor: window.chartColors.red,
    pointBackgroundColor: window.chartColors.red,
    fill: false,
    data: people_isProcessing
  }, {
    label: "S? ng??i ?ã ?ng h?",
    borderColor: window.chartColors.purple,
    pointBackgroundColor: window.chartColors.purple,
    fill: false,
    data: people_isReceived
  }]
};

Run Code Online (Sandbox Code Playgroud)

这是我的图表选项

window.onload = function() {
  var chartEl = document.getElementById("chart");
  window.myLine = new Chart(chartEl, {
    type: 'line',
    data: lineChartData,
    options: {
      title: {
        display: true,
        text: 'Kindmate - Chart Static Donate'
      },
      tooltips: {
        enabled: true,
        mode: 'index', …

Run Code Online (Sandbox Code Playgroud)

javascript php laravel chart.js

3
推荐指数

2
解决办法

3444
查看次数

通过ssh隧道访问远程数据库（Python 3）

我什至不理解（即使在阅读了几篇有关ssh tunelling的文章之后），CLI ssh命令在此脚本中的什么参数也是如此。基本上，我必须连接到某些服务器（我称其为“ ssh_tunnel_host：22”），而不是使用此隧道连接到db_host。

with SSHTunnelForwarder(
    ('ssh_tunnel_host', 22),
    ssh_username="ssh_username",
    ssh_pkey="/somepath/id_rsa",
    local_bind_address=('0.0.0.0', 1234),
    remote_bind_address=('127.0.0.1', 3306)
) as tunnel:
    client = paramiko.SSHClient()
    client.load_system_host_keys()
    client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
    client.connect('127.0.0.1', 1234)
    db_connection = pymysql.connect(host=db_host, port=3306, db='mysql', user='user',
                                    password='password', charset='utf8mb4')

Run Code Online (Sandbox Code Playgroud)

有人可以向我解释：

什么是local_bind_address-是我的本地地址还是ssh_tunnel_host本地地址？在哪里可以学习IP和端口？
取决于上一个问题-什么是remote_bind_address-它是ssh_tunnel_host还是db_host的地址？我在哪里可以学习这些IP和端口？
我应该在哪里连接client.connect（）？本地还是远程绑定？

（我确实尝试阅读文档，但仍然很混乱）

python ssh remote-access ssh-tunnel

3
推荐指数

1
解决办法

4061
查看次数

迭代JSON将结果放入数组中

我有一个来自REST API的JSON对象,如下所示:

{
  success: true,
  message: "",
  result: [{
      Currency: "GBP",
      IsActive: true,
      BaseAddress: "1N52wHoVR79PMDishab2XmRHsbekCdGquK",
      Notice: null
    },
    {
      Currency: "USD",
      IsActive: true,
      BaseAddress: "LhyLNfBkoKshT7R8Pce6vkB9T2cP2o84hx",
      Notice: null
    },
    {
      Currency: "YEN",
      IsActive: true,
      BaseAddress: "D9GqmkGCpgtnXP7xMD78v9xfqeDkqBZBMT",
      Notice: null
    }
  ]
};

Run Code Online (Sandbox Code Playgroud)

我只想要一个货币值列表,所以我这样迭代它:

var data = body.result;
for (var i in data) {
  var id = data[i].Currency;
  console.log(id)
}

Run Code Online (Sandbox Code Playgroud)

控制台打印好了:

GDP
USD
YEN

Run Code Online (Sandbox Code Playgroud)

但是我想把这些字符串放到一个新的数组中,并且无法弄清楚如何去做.有任何想法吗？

javascript arrays json node.js

3
推荐指数

1
解决办法

77
查看次数

使用解密与导入

我正在构建一个Slack使用该机器人的机器人node-slack-sdk.在他们的例子中,他们得到以下行:

var CLIENT_EVENTS = require('@slack/client').CLIENT_EVENTS;

Run Code Online (Sandbox Code Playgroud)

该CLIENT_EVENTS则使用如下:

rtm.on(CLIENT_EVENTS.RTM.AUTHENTICATED, function handleRTMAuthenticated() {
  console.log('RTM client authenticated!');
});

Run Code Online (Sandbox Code Playgroud)

我已经改变了require以便使用解构来直接获取CLIENT_EVENTS.RTM我重命名的对象RTM_CLIENT_EVENTS.

const {
  CLIENT_EVENTS: { RTM: RTM_CLIENT_EVENTS },
} = require('@slack/client');

Run Code Online (Sandbox Code Playgroud)

现在,我想改变require到import:

import {
  CLIENT_EVENTS: { RTM: RTM_CLIENT_EVENTS },
}  from '@slack/client';

Run Code Online (Sandbox Code Playgroud)

但是我收到以下错误:

ES2015名为进口不进行破坏.导入后使用另一个语句进行解构

知道他们为什么不去构造？

javascript ecmascript-6

2
推荐指数

2
解决办法

1681
查看次数

标签统计

json ×2

css ×1

ecmascript-6 ×1

google-chrome-extension ×1

html ×1

particles.js ×1

php ×1

remote-access ×1

ssh ×1

«
1
2
3
»