小编Rea*_*ing的帖子

令人难以置信的是,关于React的每个库的文档有多糟糕.

我正在尝试使用react-router(版本^ 1.0.3)进行简单重定向到另一个视图,我只是累了.

import React from 'react';
import {Router, Route, Link, RouteHandler} from 'react-router';


class HomeSection extends React.Component {

  static contextTypes = {
    router: PropTypes.func.isRequired
  };

  constructor(props, context) {
    super(props, context);
  }

  handleClick = () => {
    console.log('HERE!', this.contextTypes);
    // this.context.location.transitionTo('login');
  };

  render() {
    return (
      <Grid>
        <Row className="text-center">          
          <Col md={12} xs={12}>
            <div className="input-group">
              <span className="input-group-btn">
                <button onClick={this.handleClick} type="button">
                </button>
              </span>
            </div>
          </Col>
        </Row>
      </Grid>
    );
  }
};

HomeSection.contextTypes = {
  location() {
    React.PropTypes.func.isRequired
  }
}

export default …

当我试图传递道具时，我收到此错误。非常基本的东西。

interface Props extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, ChakraProps {
  handleMoveAll: () => void
}

export const MyWrapper: FC<Props> = (props): JSX.Element => (
  <div {...props}>
    <IconBox label="Move All" onClick={props.handleMoveAll}>
      <MyIcon />
    </IconBox>
  </div>
)

然后我MyWrapper在发出警告的父组件上调用该组件。

export const ParentComp: FC<{}> = (): JSX.Element => {
  const myFunction = () => console.log('Hit it')

  return (
      <MyWrapper handleMoveAll={() => myFunction()}>
         <p>Child Component</p>
      </MyWrapper>
  )
}

警告：React 无法识别handleMoveAllDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写handlemoveall。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。

如果我删除它，handleMoveAll={() => myFunction()}警告就会消失。 …

我有一个 api 服务，我有不同的方法来调用 API。我已成功测试了所有 GET 请求，但在测试 POST 请求时遇到了麻烦。

这是方法：

export default class ApiService {
  static makeApiCall = <T>(
    url: string,
    oneCb: <T>(d: Data) => T,
    secondCb: (d: T) => void,
    errorCb?: (a: ErrorModel) => void,
    method = 'get',
    data = {},
  ): Promise<void> => {
    const config: AxiosRequestConfig = {};
    if (method === 'post') {
      config.headers = header;
      return ApiClient.post(url, data, config)
        .then(res => callback(normalizeCallback(res.data))).catch(error => someHandler(error));            
    } else {
      return ApiClient.get(url)
        .then(res => callback(normalizeCallback(res.data))).catch(error => someHandler(error));
    }
  };

  // …

问题很简单,我不知道为什么我没有得到我想要的行为,这是我正在使用的Angular UI Bootstrap手风琴,但正如你在这个例子中所看到的,打开手风琴的唯一方法是if你点击标题,这不是我想要的,现在看看这个例子,这就是我想要的,无论你点击面板在哪里,面板都会打开你是否点击标题.

这是我正在使用的代码:

    <accordion close-others="false">
      <accordion-group class="fx-fade-right fx-speed-300"
        ng-repeat="sport in sports | filter:query"
        ng-show="sport.leagues.length">
          <accordion-heading>
            {{::sport.name}}
            <span class="pull-right badge">{{::sport.leagues.length}}</span>
          </accordion-heading>
          <div class="list-group leagues-margin"
            ng-click="addSportToLines(sport)">
            <a href="javascript:void(0);" class="list-group-item"
              ng-repeat="league in sport.leagues"
              ng-class="{active: league.active}"
              ng-click="addLeagueToLines(league)">{{::league.name}}
            </a>
            <a href="javascript:void(0);"
              class="list-group-item list-group-item-danger"
              ng-hide="sport.leagues.length">No Leagues
            </a>
        </div>
      </accordion-group>

我正在将jQuery插件转换为Angular Directive,但仍然无法正常工作,或者:根本不工作.

这是我想要实现的行为

这里也是一个jsfiddle

请记住,我想用此实现的只是左侧边栏上的行为,到处都是"粘性".

我用jQuery做了(我是Angular的新手),我需要让它与Angular一起工作.请去看看Plunkr示例,这个行为是我想要的.如果你们中的一些人花时间帮助我,请提前致谢.

看看jQuery代码:

$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 85;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            $("#sidebar").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            $("#sidebar").stop().animate({
                marginTop: 50
            });
        };
    });
});

这是我的角度指令:

angular.module('capilleira.clickAndGambleWebApp.directives', [])
  .directive('sticky', function ($window) {
    return {
      restrict: 'A',
      controller: ($scope)
      link: function (scope, element, attrs) {
        var raw = element[0],
            offset = element.offset(),
            topPadding = 85;

        angular.element($window).bind('scroll', function () {
          console.log('SCROOOOOOOOOOOOOLLLL');
          if ($window.scrollTop …

我正在尝试安装此插件,其中是Angular UI Bootstrap,我不需要完整的库,只需插入,我收到错误:

我在终端输入的命令:

bower install bower-bootstrap-accordion --save

然后是错误:

Bower error: ENOTFOUND Package bower-bootstrap-accordion not found

这里是 bower.json

{
  "name": "bower-bootstrap-accordion",
  "license": "MIT",
  "version": "0.11.0",
  "author": {
    "name": "https://github.com/angular-ui/bootstrap/graphs/contributors"
  },
  "dependencies": {
    "bower-bootstrap-collapse": "0.11.0"
  },
  "main": "ui-accordion-tpls.js"
}

链接到插件

我必须安装完整的库吗？

让我们从一些参考代码开始

var express = require('express');  
var app = express();  
var session = require('express-session');

app.use(session({  
  store: require('connect-session-knex')()
}));

我在这里有几个问题,如果你知道答案,我想回答一下:

每次require调用Nodejs时,是否都是命名依赖注入？或依赖注入的真正含义是什么？

我之所以这样问,是因为我一直在阅读关于Node的内容,我看到有人在谈论这个module或module.export模式,我很困惑,这module是一样的dependency吗？

因此,我需要的是对依赖注入的明确解释,以及何时/何时需要注入依赖项...

我正在运行命令，./startup.sh nginx:start并且收到此错误消息，zsh: permission denied: ./startup.sh为什么会发生这种情况？

所以我尝试通过 React Native 和 fetch API 将图像发布到服务器。

      fetch(`${API}/uploadAvatar`, {
        method: "POST",
        headers: {
          Authorization: bearer,
          "X-Requested-With": "XMLHttpRequest",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ file: result.uri }),
      })
        .then((response) => response.json())
        .then((json) => {
          console.log({ json });
          // this console.log outputs:
          // "The format of the file should be jpg, png, jpeg.",
        })
        .catch((err) => {
          console.log({ err });
        });
    }

result返回这个：

{
  "cancelled": false,
  "height": 1776,
  "type": "image",
  "uri": "file:///var/mobile/Containers/Data/Application/18F84F29-CB72-4615-A68F-A00422D9B119/Library/Caches/ExponentExperienceData/%2540heythere%252Fkeep-up/ImagePicker/959E8BDE-FCF4-40C6-AF18-8F9EA852760D.jpg",
  "width": 1776,
}

这些是 POSTMAN 上的调用，您可以在其中看到它们的工作情况。

我究竟做错了什么？

所以这就是我想要实现的目标：

（忽略绿松石细胞）

正如你所看到的，整个文本是模糊的，因为它应该在文本上的渐变。当您单击 READ MORE 按钮时，该元素应移动到底部并移除渐变，而当您单击 READ LESS 时，它应返回其原始状态。

现在设计看起来不像我在代码中所做的设计，我完全需要它。但是为了获得与设计完全相同的东西，我的想法已经用完了。

有什么建议？

这是代码：

$(document).ready(function(){
    var toggleReadMore = function() {
      $('#read-more').click(function(e) {
          $(this).prev().animate({'height': $(this).prev()[0].scrollHeight + 'px'}, 400);
          $(this).hide();
          $(this).next('#read-less').show();
      });
      $('#read-less').click(function(e) {
          $(this).prev().prev().animate({height: '90px'}, 400);
          $(this).hide();
          $(this).prev('#read-more').show();
      });

    };
    toggleReadMore();
}());

#p {
  height: 50px;
  overflow: hidden;
}
#read-less {
 display: none;
}
#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: …