小编chi*_*nds的帖子

构建一个小型反应应用程序,通过地理定位(由浏览器确定为子组件作为道具).

第一个组件:App.jsx

import React, {Component} from 'react';

import DateTime from './components/dateTime/_dateTime.jsx';
import Weather from './components/weather/_weather.jsx';
import Welcome from './components/welcome/_welcome.jsx';

require ('../sass/index.scss');

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      latitude: '',
      longitude: ''
    };
    this.showPosition = this.showPosition.bind(this);
  }

  startApp () {
    this.getLocation();
  }

  getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.showPosition);
    } else {
        console.log("Geolocation is not supported by this browser.");
    }
  }

  showPosition(position) {
    this.setState({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
    })
  }

  componentWillMount () {
    this.startApp();
  } …

我试图从父组件中调用存储在子组件中的函数.但不确定要这样做.我知道如果是父母的形式孩子,我可以简单地使用组件道具,但不知道如何从父母到孩子.

正如您在下面的示例中看到的那样,父类中的按钮需要触发子类中的显示功能.

var Parent = React.createClass ({
   render() {
       <Button onClick={child.display} ?>
   } 
})


var Child = React.createClass ({
    getInitialState () {
        return {
            display: true
        };
    },


    display: function(){
        this.setState({
             display: !this.state.display
        })
    },

    render() {
     {this.state.display}
    } 
})

我写了一个小的反应组件,从开放的天气api中获取一些数据.获取成功,我可以在响应中获得一个json对象.

然后,我将此响应保存到组件状态使用 this.setState({})

react dev工具显示预测对象实际上保存在状态中.

然而,当我来渲染任何数据时,我总是得到一个错误,指出`无法读取属性'预测'为null.

下面是反应组件和对象本身的屏幕截图.

    export default class Weather extends Component {
    getWeather () {
        var self = this;

        fetch('http://api.openweathermap.org/data/2.5/weather?zip=sl44jn,uk&units=metric&APPID=ed066f80b6580c11d8d0b2fb71691a2c')  
            .then (function (response) {  
                if (response.status !== 200) {  
                    console.log('Looks like there was a problem. Status Code: ' + response.status);  
                    return;  
                }

                response.json().then(function(data) {  
                    self.setWeather(data);
                });
            })

            .catch (function (err) {  
                console.log('Fetch Error :-S', err);  
            });
    }

    setWeather (forecast) {
        console.log(forecast);
        this.setState({
          forecast: forecast.name
        })
    }

    componentWillMount () {
        this.getWeather();
    }

    componentDidMount () {
        // window.setInterval(function () { …

I am moving an application to a new build pipeline. On CI I am not able to install node to complete the NPM install step.

My idea to is to move the npm install step to a Docker image that uses Node, install the node modules and them copy the node modules back to the host so another process can package up the application.

This is my Dockerfile:

FROM node:9

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app …

借助现在支持服务人员和PWA的IOS 11.3，是否可以使用像android一样的“添加到主屏幕”功能？

我知道您可以通过手动执行此操作，share > add to home screen但我想知道这是否会像Android一样自动执行。

我将一些表添加到当前数据库中,该数据库将驱动在线菜单.

到目前为止,我已经创建了"菜单类别"表.下面是表格结构.

CREATE TABLE IF NOT EXISTS `menu_categories` (
  `id` int(2) NOT NULL AUTO_INCREMENT,
  `cat_id` varchar(6) NOT NULL,
  `cat_name` text NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `cat_id` (`cat_id`)
)

我还没有编写PHO脚本,但只想插入一些虚拟类别进行测试,但是当我插入一个类别然后浏览表格时,数据已输入两次,所以我得到了每个类别中的两个.

我环顾四周,不能为我的生活找出原因,这只是PHP MyAdmin吗？

下面是一些插入数据的打印屏幕和最终结果:

输入虚拟数据

用于插入虚拟数据的sql查询

具有重复条目的表的预览

知道这里发生了什么吗？

谢谢

*编辑:我忘了添加我尝试将'cat_id'设置为唯一.然后,当我运行insert命令时,我收到了有关插入重复数据的错误

使用 react-codemirror2 和 react-jsonschema-form 启动了一个非常相似的新项目https://mozilla-services.github.io/react-jsonschema-form/

但是，当我的 codemirror 编辑器呈现 JSON 时，我将所有节目加载到一行中。我已经浏览了https://mozilla-services.github.io/react-jsonschema-form/的源代码，但找不到与我所拥有的不同的任何内容。

我的源代码：

    import React, { useEffect, useState } from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";

import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import "codemirror/mode/javascript/javascript.js";

// components

const CodeEditorContainer = ({ code, onChange }) => {
  const [codeEditorState, setCodeEditorState] = useState();

  useEffect(() => {
    setCodeEditorState(code);
  }, [code]);

  const cmOptions = {
    theme: "default",
    height: "auto",
    viewportMargin: Infinity,
    mode: {
      name: "javascript",
      json: true,
      statementIndent: 2
    },
    lineNumbers: true,
    lineWrapping: …

我有一个 behat 测试，它单击一个按钮，通常会在新选项卡中打开一个 url。

我可以测试单击按钮后是否打开了一个新选项卡？

这是小黄瓜：

Scenario: Open document in a new tab
    Given I am a "Project Admin" for project "x"
    And   Project "x" has document type "orbitron" with editor "none"
    And   I create a new orbeon form "orbitron" for project "x" from fixture "OrbitronFilePicker.xhtml"
    Then  I visit the orbeon new content form for document type "orbitron" in project "x"
    And   I can see the "file-picker" control
    When  I enter a valid file picker reference "urn:isite:x:mickeyMouse"
    Then  I can …

我正在处理有2个主要行的网页,顶行有一个300px的固定高度,不会改变.

底行需要填充视口/屏幕的高度(其余部分如果是可用空间.)

请将此线框视为基本示例:https://wireframe.cc/aUePUH

我已经尝试将body/html设置为100%然后将底行容器设置为100%使得底部行中的3个cols也是100%高度,但它们似乎只是达到内容的100%高度.

理想情况下,我想在底行设置最小高度,然后如果有更多垂直空间可以扩展并填充视口

我也很久以前身高:100vh,但似乎没有这样做.

<div class="container">
  <div class="row top-row">
    <p>Top Row with a fixed heigh - 300px</p>
  </div>

  <div class="row bottom-row">
    <div class="col-xs-4">
      <p>Col 1</p>
      <p>
        Should fill viewport/avaialable screen height
      </p>
    </div>

    <div class="col-xs-4">
      <p>Col 2</p>
      <p>
        Should fill viewport/avaialable screen height
      </p>
    </div>

    <div class="col-xs-4">
      <p>Col 3</p>
      <p>
        Should fill viewport/avaialable screen height
      </p>
    </div>
  </div>
</div>

top-row {
  height: 300px;
  background-color: black;
  color: white;
  margin-bottom: 15px;
}

.bottom-row {
  height: 100%;
} …