小编Seq*_*ial的帖子

React Dev工具将我的Component显示为Unknown

我有以下简单的组件:

import React from 'react'
import '../css.scss'

export default (props) => {
  let activeClass = props.out ? 'is-active' : ''
  return (
    <div className='hamburgerWrapper'>
      <button className={'hamburger hamburger--htla ' + activeClass}>
        <span />
      </button>
    </div>
  )
}
Run Code Online (Sandbox Code Playgroud)

当我在react开发工具中查找它时,我看到:

在此输入图像描述

这是因为我需要扩展React组件吗?我是否需要将其创建为变量并执行此操作?

google-chrome-devtools reactjs

29
推荐指数
3
解决办法
7720
查看次数

箭头函数在.map内的prop中传递变量

我试图将一个变量传递给React中的prop函数,该函数都在.map函数中.

我在箭头函数参数错误中得到一个无效的左手边.

<div style={ style.navContainer }>
    {navItems.map((item, i) => <div key={ i } onClick={ (item.name) => this.props.onClickGoTo(name) } style={ style.navItem }>
                <img style={ style.icon } src={ item.src } />
                { item.name }</div>)}
</div>
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs

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

使用存储类通过aws放大反映本机映像

我有一张图片.我想使用aws-amplify将其上传到S3.所有Storage类上传示例都使用文本文档; 但是,我想上传一张图片.我正在使用expo,它没有来自react-native-fetch-blob的支持,并且本机反应没有blob支持......

所以我的选择似乎是:

  1. 通过lambda创建节点服务.
  2. 仅将base64信息上传到S3而不是blob.

const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); if (status === 'granted') { const image = await ImagePicker.launchImageLibraryAsync({ quality: 0.5, base64: true }); const { base64 } = image; Storage.put(`${username}-profileImage.jpeg`, base64); }

它是否正确?

javascript blob amazon-web-services react-native aws-amplify

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

包含动态html的React函数返回不会呈现

所以我有一个函数可以过滤传递的参数是否为select,text或date字段,并动态地添加到render jsx中.

当我触发一个返回时,它不会渲染html/jsx返回.我已经在console.logs中测试而不是html并且它成功告诉我switch语句的结构是正确的并且我传递了正确的类型,只是html返回不想呈现.没有警告或错误.当我在console.log中获取checkType函数时

在此输入图像描述

没有警告或错误.

这是通过this.getFields()验证的数据图片

在此输入图像描述

// wrapped in a react class

checkType(type, options, placeholder, name, handleUpdatedValue, defvalue, index) {

        let select = <select onChange={handleUpdatedValue.bind(this)} >{options.map((option, i) => <option value={option} key={i}>{option}</option>)}</select>;
        let text = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="text" />
        let date = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="date" />

        switch(type) {
            case 'select':
                return select
                break;
            case 'text':
                return text
                break;
            case 'date':
                return date
                break;
            default: 
                console.log('Error: Invalid Type');
        }
    }

handleSubmit() {

}

render() {

    let values …
Run Code Online (Sandbox Code Playgroud)

javascript jsx reactjs

3
推荐指数
1
解决办法
7973
查看次数