小编the*_*uls的帖子

如何使用 antd diver 在 React 组件中分隔屏幕的两侧?

我正在使用 antd,并且希望垂直分隔线将屏幕的两侧分开。两侧实际上是由不同的Col组件分隔开的。它们目前看起来像这样:

 class Example extends React.Component {
   render () {
     return (
      <Row>
        <Col span={11}>
          CONTENT ONE SIDE
        </Col>
        <Col span={2}>
          <Divider type='vertical'/>
        </Col>
        <Col span={11}>
          CONTENT OTHER SIDE
        </Col>
      </Row>
     )
   }
 }
Run Code Online (Sandbox Code Playgroud)

这里的问题是分隔线几乎没有出现。我希望它一直到内容结束的地方。相反,它只是一条很小的线。

这是当前的屏幕截图:

在此输入图像描述

你几乎看不到中间的分隔线。

如何使垂直分隔线与内容一样长?

谢谢!

javascript reactjs antd

6
推荐指数
1
解决办法
1万
查看次数

使用Matlab将形状检测为圆形

我在Matlab编写一个程序来检测一个圆圈.

我已经设法检测到正方形,矩形和三角形等形状,基本上是通过搜索角落,并根据它们之间的距离确定它的形状.图像是黑色和白色,黑色是背景,白色是形状,所以对于我找到角落,我只需搜索图像中的每个像素,直到找到白色像素.

但是我无法弄清楚如何识别圆圈.

这是一个圆形输入如何显示的示例:

http://i.imgur.com/yfbqx.png

matlab geometry image image-processing shapes

5
推荐指数
1
解决办法
6498
查看次数

更改axios标头中的Content-Type以修复415错误

我正在尝试通过axios发布请求将文件发送到后端。

这是我目前遇到的错误:

cherrypy._cperror.HTTPError:(415,“预期内容类型为application / json,text / javascript的实体”)

从我已阅读的内容中,我需要在发布请求中更改Content-Type,环顾四周,我目前正在尝试这样做:

handleUploadButton(e){
            const upload_file = this.state.file;
            const formData = new FormData();
            formData.append('file', upload_file);
            const request = axios.post(someUrl, formData, {headers: {
                "Content-Type": "application/json"}
            })
                .then(function (response) {
                    console.log('successfully uploaded', upload_file);
                });
    }
Run Code Online (Sandbox Code Playgroud)

不确定是否相关,但是所有这些都是通过reactjs表单发生的。这是我当前的Content-Type:Content-Type:multipart / form-data; boundary = ---- WebKitFormBoundaryBwjjjGuJEySeXdRU

我不知道从这里去哪里。任何帮助将不胜感激。

javascript rest http reactjs axios

5
推荐指数
2
解决办法
2万
查看次数

如何适当地重用 mocha 测试的描述块?

我有一个以不同模式运行的应用程序(将其视为针对不同平台运行并使用不同协议),其中一个应用程序在每次打开页面时都有很长的加载时间。还有一些其他小的变化,但所有这些都可以使用 wdio 的设置变量来处理。

目前,我为应用程序的每个部分都有一个测试文件(带有描述)。如果正在测试的配置之一没有这么长的等待时间,那会很好。无论如何,我决定处理这个测试用例,将它全部处理在一个文件中,这些文件都将在同一页面上。

无论如何,与其将我之前的所有测试复制并粘贴到这个大文件中,我想知道是否可以以某种方式重用它们,就好像它们是函数一样。

就像现在一样,我只是将东西包装在函数中,例如:

// test1.js
module.exports = function test1 () {
  describe('Test1', function () {
    var settings = {}

    before(function () {
     // do something
    })

    it('do something', function () {
      assert.ok(true)
    })
    it('do something else', function () {
          assert.ok(true)
    })
  })
}
Run Code Online (Sandbox Code Playgroud)

在另一个文件中,我们运行我们创建的每个函数:

test1 = require('./test1')
test2 = require('./test2')
...
test10 = require('./test10')
describe('Main Test', function () {
  test1()
  test2()
  ...
  test10()
}
Run Code Online (Sandbox Code Playgroud)

如果我能以某种方式选择在我的命令上运行哪些测试函数,这将解决我的 DRY 问题

wdio wdio/wdio.conf.js --specs wdio/test/spects/browser/test1.js

这显然行不通。

基本上我想要一个能够重用我的测试(描述块)的解决方案。我所做的是正确的道路吗?如果不是,应该怎么做?

javascript mocha.js selenium-webdriver webdriver-io e2e-testing

5
推荐指数
1
解决办法
5294
查看次数

需要 React 输入框为浮点数

我需要一个简单的输入框来成为一个浮点数(任何带有.真的)。就像现在一样,它不允许我放置点并进行浮点运算。应该很简单,但我在这方面找不到太多。

目前的代码大致如下:

class MyComponent extends React.Component {
  render () {
    return (
      <td>
        <label> Value: </label>
            <input
                type='number'
                min='0'
                max='20'
                className='form-control'
                value={this.state.value}
                onChange= {(evt) => this.onValueChange('value', evt.target.value)}
              />
      </td>
    )
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript forms input reactjs

5
推荐指数
1
解决办法
1万
查看次数

使用小屏幕时强制在按钮文本内换行

我有一个响应式 Web 应用程序,其中包含一些对于小移动屏幕来说太大的按钮。他们有太多的文字,所以他们最终离开了屏幕。我目前a通过给他们引导类来使用标签作为按钮。所以代码目前看起来是这样的:

<a className='btn btn-default'>Here I have a button with long text in it, which causes some text to go off screen when in small mobile devices.</a>
Run Code Online (Sandbox Code Playgroud)

我想在文本中添加一个换行符,这样它就不会离开屏幕(这就是为什么我不简单地添加一个<br/>),而只会在小屏幕上。我怎么能那样做?

编辑:这是代码的更完整视图:

<div className='row'>
  <div className='col-sm-12'>
    <p>Some text which is irrelevant to the problem.</p>
    <a className='btn btn-default'>Here I have a button with long text in it, which causes some text to go off screen when in small mobile devices.</a>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

javascript css responsive-design twitter-bootstrap reactjs

5
推荐指数
1
解决办法
2622
查看次数

仅当 props 中满足特定条件时才添加 HoC

我正在使用重组库和 HoC 为我的组件传递一堆 props。我想知道是否有办法compose在设置 HoC 之前检查 props。例如,假设我有这样的东西:

export default compose(
  withProps(props => ({
    shouldUseWithMyHoc: someCondition() // true or false
  })),
  withState('someState', 'setSomeState', ''),
  withHandlers({
    doStuff: props => evt => {
      // do stuff
    }
  }),
  withMyHoc() // should only use if `shouldUseWithMyHoc` prop is true
)(MyComponent)
Run Code Online (Sandbox Code Playgroud)

我该怎么做才能withMyHoc仅在shouldUseWithMyHoc设置为 时使用true

我想过也许可以做一个三元组,但是进展并不顺利,当条件为假时我没有什么可以依靠的。它看起来像这样:

  export default compose (
  ...
  (props) => {(
    props.shouldUseWithMyHoc
    ? withMyHoc()
    : null)}
  )(MyComponent)
Run Code Online (Sandbox Code Playgroud)

通过使用三元,我收到以下错误:

警告:无法在未安装的组件上调用 setState(或forceUpdate)。这是一个空操作,但它表明应用程序中存在内存泄漏。要修复此问题,请在 componentWillUnmount 方法中取消所有订阅和异步任务。

我有办法完成这件事吗?如果这看起来是正确的,那么我做错了什么?

reactjs recompose higher-order-components

5
推荐指数
1
解决办法
1104
查看次数

尝试使用 React 测试库检查不存在的元素总是失败

我有一个组件,在某些情况下不应该渲染任何内容(它只是返回null)。它看起来像这样:

const MyComponent = ({ renderNothing }) => {
    if (renderNothing) {
        return null
    }
    return <div data-testid='my-component'>Stuff</div>
}
Run Code Online (Sandbox Code Playgroud)

我想测试一下,当事实renderNothing为真时,具有 data-testid 的元素my-component不存在。我当前的测试看起来像这样:


  it.only('should not render MyComponent when renderNothing is true ', async () => {
    render(<MyComponent renderNothing={true}/>)
    const myComponent = screen.getByTestId('my-component')
    expect(myComponent).not.toBeInTheDocument()
  });
Run Code Online (Sandbox Code Playgroud)

不幸的是,这个测试总是失败并显示以下消息:

TestingLibraryElementError:无法通过以下方式找到元素:[data-testid =“my-component”]

有没有办法在不触发错误的情况下成功执行此检查?

javascript reactjs jestjs react-testing-library

5
推荐指数
1
解决办法
6611
查看次数

使用 reactjs 上传文件并处理 C:/fakepath/file

我有一个简单的表单来上传一个文件,稍后将处理我的后端 python 代码。但是,当我尝试上传文件时得到的是 C:\fakepath\test.txt 。

从我所做的研究来看,出于安全考虑,这是预料之中的。这很好,但现在我的问题是我到底如何才能解决这个问题才能使用我在后端上传的文件?

我看了很多不同的地方,似乎没有一个解决这个问题。

这是我当前的代码:

class SomeForm extends Component{

    handleFile(e){
        this.setState({value: e.target.value});
    }

    handleSubmit(e){
        var me=this;
        if (this.state.value.length>0){
            var upload_file = this.state.value;
            const request = axios.post(this.props.cfg_url+'/upload', {upload_file})
                .then(function(response){
                console.log('successfully uploaded', upload_file);
            })

        }
    }

   render(){
      return(


           <Form inline onSubmit={this.handleSubmit}>
                        <FormGroup controlId='uploadFormId'>
                            <ControlLabel>Upload File:</ControlLabel>
                            <FormControl
                                type='file'
                                label='File'
                                onChange={this.props.onChange}
                            />
                        </FormGroup>
                        <Button type='submit'>Upload</Button>
                    </Form>
       );

   }
}
Run Code Online (Sandbox Code Playgroud)

javascript file node.js reactjs react-bootstrap

4
推荐指数
1
解决办法
1万
查看次数

将 tsconfig 设置为忽略“类型‘bar’上不存在属性‘foo’。” 但仅针对特定变量

我有一个foo在代码库中使用的对象,需要bar从中访问属性。然而,由于特定情况,ts 认为其上不存在财产,尽管实际上存在。所以我到处都看到这条消息的红线:

类型“bar”上不存在属性“foo”

在我的 ts-config 文件中,我想将其设置为忽略所有这些错误,但仅限于变量foo

这可以做到吗?

lint typescript tsconfig tslint

4
推荐指数
1
解决办法
4238
查看次数