小编nob*_*are的帖子

我有两个div横幅,有相应的CSS箭头.单击横幅时,javascript会在显示和隐藏下面的文本之间切换.同样,相应的箭头在文本显示时向下旋转,在隐藏文本时向后旋转.

现在,我希望我的第一个div横幅在页面首次加载时自动显示.但是,当我绘制CSS箭头时,由于div的填充,我无法使第一个div中的箭头与后续div中的箭头相同并正确排列.

http://jsfiddle.net/nVuQ2/1/

我试过弄乱箭头的位置:

.tri0 {
    margin-left: 20px;
    margin-top: 5px;
}

但我能做的最好的事情是将tri0箭头向上推到h3标签的填充处,它不再向前移动.

有没有办法可以在toggleClass中设置切换标记,使其说第一个div横幅已经切换,后续点击使其无法切换？

我有一个非常基本的“Hello World”NestJS 应用程序，我正在尝试将其部署到 Azure DevOps 中的 Azure Web App 实例。

我已经使用 YAML 文件设置了一个构建管道，该文件输出带有dist和node_modules目录的构建工件。

然后，在我的发布管道中，我设置了持续部署来下载该工件并部署它。发布管道包含部署 Azure 应用服务的单个步骤。此外，在此步骤之后，我输入了一些部署后操作npm install，其中npm update、 和npm run start:prod来启动 NestJS 服务器。

然而，在运行管道时，该步骤花费了过多的时间，最终出现错误：

当我访问已设置的 Web 应用程序实例 ( https://<project-name>.azurewebsites.net/) 时，我看到：

因此，我单击“诊断资源”来尝试找出我的发布失败的原因，并最终发现此错误：

2020-05-29T20:01:30.864090341Z   _____                               
2020-05-29T20:01:30.864143041Z   /  _  \ __________ _________   ____  
2020-05-29T20:01:30.864149941Z  /  /_\  \___   /  |  \_  __ \_/ __ \ 
2020-05-29T20:01:30.864153741Z /    |    \/    /|  |  /|  | \/\  ___/ 
2020-05-29T20:01:30.864157341Z \____|__  /_____ \____/ |__|    \___  >
2020-05-29T20:01:30.864161141Z …

我正在迁移我的 React 文件.tsx并遇到了这个问题。

页脚.tsx

const Footer = ({ children, inModal }) => (
    <footer className={'(inModal ? " in-modal" : "") }>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

父组件.tsx

import Footer from 'path/to/Footer';

export class ParentComponent extends React.Component<{ showSomething: (() => void) }> {
    render() {
        return (
            <Footer>
                <Button onClick={() => this.props.showSomething()}>Add</Button>
            </Footer>
        );
    }
}

<Footer>错误标记下方有一个红色下划线：

[ts] 输入 '{children: Element; }' 不可分配给类型 'IntrinsicAttributes & { children: any; inModal: 任何; }'。类型'{孩子：元素; }' 不可分配给类型 '{ children: …

我有一个以前创建的.js文件,它模拟了我们的一些函数用于jest测试目的.我正在将其迁移到.ts文件:

Server.ts

const Server = jest.genMockFromModule('../Server');

Server.getAsync = Server.default.getAsync;
// other REST-ful functions here

export default Server;

我收到以下错误:

类型"{}"上不存在属性"getAsync"

类型"{}"上不存在属性"默认"

然后,在相应的测试文件中:

MyComponent.test.ts

import Server from 'path/to/Server';

jest.mock('path/to/Server');

const dispatchMock = jest.fn();
const getStateMock = jest.fn();

describe('MyComponent.someFunction', () => {
    beforeEach(() => {
        jest.resetAllMocks();
    });

    it('Does the right stuff', () => {
        Server.getAsync.mockReturnValueOnce(Promise.resolve([{ key: 'value' }]));
        dispatchMock.mockImplementationOnce((promise) => promise);
        dispatchMock.mockImplementationOnce();

        return someFunction()(dispatchMock)
            .then(() => {
                expect(Server.getAsync).toHaveBeenCalledTimes(1);
                expect(Server.getAsync.mock.calls[0][0]).toBe('something');
            });
    });
});

我收到了错误 dispatchMock.mockImplementationOnce()

期望1个参数,但得到0.(方法)jest.MockInstance <{}>.mockImplementationOnce(fn:(... args:any …

我正在使用D3 v4（大多数（如果不是全部）示例都适用于v3）。回到v3中，他们有了一个名为rangeBand（）的东西，它可以为我动态地将所有内容整齐地放置在x轴上。

现在，在v4中，我想知道如何做到这一点。

我有一个条形图：

var barEnter = vis.selectAll("g") 
                  .data(rawdata)
                  .enter()
                  .append('g')
                  .append("rect")
                  .attr("class", "bar")
                  .attr("x", function(d) { return x(d.key); })
                  .attr("y", function(d) { return y(d.value); })   
                  .attr("height", function(d) { return height - y(d.value); })
                  .attr("width", canvas_width / rawdata.length);

正是这根横条的宽度，这使我很困惑。如果将其设置为canvas_width / rawdata.length，则可以将条形图很好地定位在x轴上每个刻度周围的中心。问题在于所有条都被压在一起，并且它们之间没有填充。

因此，自然地，我尝试这样做x.paddingInner(.5)确实添加了一些填充，但是现在这些条不再位于刻度线的中心。做任何x.paddingOuter()事情都会使事情变得更加混乱。

搜寻之后，我发现这rangeBand()就是我想要的，但这仅适用于v3。在v4文档中，没有什么看起来像它。是rangeRound()吗 是align()吗 我不确定。如果有人能指出我正确的方向，将不胜感激。

我在尝试构建这个Web应用程序时第一次尝试React.js.我正在Cannot read property 'setState' of null下面的指定行.我一直试图找出过去几个小时的原因,似乎无法弄明白.任何帮助将不胜感激.

MyModal.jsx

import React from 'react';
import { Modal, Button, ButtonToolbar } from 'react-bootstrap';

export default class MyModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {show: false};
    }

    showModal() {
        this.setState({show: true});
    }

    hideModal() {
        this.setState({show: false});
    }

    render() {
      return (
        <ButtonToolbar>
          <Button bsStyle="primary" onClick={this.showModal}>
            Launch demo modal
          </Button>

          <Modal
            {...this.props}
            show={this.state.show}
            onHide={this.hideModal}
            dialogClassName="custom-modal"
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <h4>Wrapped Text</h4>
              <p>Blah</p>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={this.hideModal}>Close</Button>
            </Modal.Footer>  // …

我正在使用 FluentMigrator 将一个数据库架构迁移到另一个数据库架构。我有一个案例，我想在添加新数据之前检查某些数据（特别是一行）是否存在。

if (!Schema.Table("MyTable").Something().Exists)
    Insert.IntoTable("MyTable").Row(new { Id = 100, Field="Value" });

如何首先检查该行是否存在？

我们有一个按钮，我们希望根据某些条件启用或禁用。此外，我们希望按钮在禁用时的悬停效果显示工具提示，解释其禁用原因。

目前，我们有这样的事情：

export class NextButton extends React.Component {
    makePopover () {
        return (
            this.props.someCondition && <Popover>Please enter a title.</Popover>
        )
    }

    render () {
        return (
            <div>
                <OverlayTrigger placement='top' overlay={this.makePopover()}>
                    {/* wrap this in a div so when the button is disabled, the popover still works */}
                    <div>
                        <Button
                            onClick={() => this.props.goToNextPage()}
                            disabled={this.props.someCondition}
                        >
                            Next
                        </Button>
                    </div>
                </OverlayTrigger>
            </div>
        );
    }
}

现在，如果我们仔细查看该makePopover函数，如果someCondition为 false，Popover则不会呈现并OverlayTrigger在返回任何没有 id 的内容时抛出错误。

因此，为了解决这个问题，我们尝试了：

this.props.someCondition ? <Popover>...</Popover> : <span>...</span> …

使用 Postman 测试我的端点，我能够成功“登录”并接收 JWT 令牌。现在，我正在尝试访问一个据称具有 的端点，AuthGuard以确保现在我已登录，我现在可以访问它。

但是，401 Unauthorized即使在 Postman 中提供 JWT 令牌，它也会不断返回。

这是我的代码：

用户控制器.ts

@Controller('users')
export class UsersController {
    constructor(private readonly usersService: UsersService) {}

    @UseGuards(AuthGuard())
    @Get()
    getUsers() {
        return this.usersService.getUsersAsync();
    }
}

jwt.strategy.ts

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
    constructor(
        private readonly authenticationService: AuthenticationService,
    ) {
        super({
            jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
            ignoreExpiration: false,
            secretOrKey: 'SuperSecretJWTKey',
        });
    }

    async validate(payload: any, done: Function) {
        console.log("I AM HERE"); // this never gets called.
        const user = await this.authenticationService.validateUserToken(payload);

        if …

我正在使用D3 v4.我有一个使用x轴创建的条形图scaleBand().现在,我创建了一个y轴,但我的问题是无论我如何定位它,它都会切入图形的实际条形图.

在我的JS文件的顶部,我有:

var width = 350; var height = 300;

然后,我实际创建Y轴的部分:

var y = d3.scaleLinear()
      .domain([0, 300000])
      .rangeRound([height, 0]);

var yAxis = d3.axisRight(y);
            yAxis.ticks(6);

chart.append("g")
     .attr("class", "y axis")
     .attr("transform", "translate(" + (width - dist_from_right) + ", 0)")
     .call(yAxis);

从图中可以看出,轴从底部到顶部延伸了整个SVG的高度,这意味着0的一半被截断,而300,000的一半被截断.

第一个问题:我如何"挤压"(或缩放)y轴,使其显示在SVG的范围内？

接下来,我想翻译y轴,以便它不会切入我的红色条.如果我尝试使用该transform属性,我可以将轴推到SVG边界的右侧,但这意味着数字不在SVG边界.我也尝试增加width变量,但这没有任何作用,因为它只是按比例拉伸x轴.

第二个问题:如何移动y轴使其不会切入x轴和红色条并且在SVG窗口中仍然可见？

谢谢!