为什么我的复选框没有显示在react中?

时间:2019-01-12 19:46:14

标签: reactjs

我有一个问题,const gulp = require('gulp'); const sourcemaps = require('gulp-sourcemaps'); const concat = require('gulp-concat'); const watchify = require('watchify'); const browserify = require('browserify'); const source = require('vinyl-source-stream'); const buffer = require('vinyl-buffer'); const log = require('gulplog'); // add custom browserify options here const customOpts = { entries: ['./src/js/main.js'], // require: ['bootstrap', 'jquery'], // UNCOMMENT CAUSES ISSUE standalone: 'mainBundle', debug: true }; const opts = {...watchify.args, ...customOpts}; const b = watchify(browserify(opts)); console.log('Browserify options: ', opts); // add transformations here // i.e. b.transform(coffeeify); exports.js = bundle; // so you can run `gulp js` to build the file b.on('update', bundle); // on any dep update, runs the bundler b.on('log', log.info); // output build logs to terminal function bundle() { return b.bundle() // log errors if they happen .on('error', log.error.bind(log, 'Browserify Error')) .pipe(source('bundle.js')) // optional, remove if you don't need to buffer file contents .pipe(buffer()) // optional, remove if you dont want sourcemaps .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file // Add transformation tasks to the pipeline here. .pipe(sourcemaps.write('./')) // writes .map file .pipe(gulp.dest('./dist/js')); } 组件未显示在网页上。有人可以帮我弄清楚吗?

这是我的文件层次结构:

Size

这是我的“ components / Shelf / Filter / index.js”:

components
    CheckBoxes
        index.js
        style.css

    Shelf
        Filter
            index.js
            style.css

这是我的“ components / CheckBoxes / index.js”和“ components / CheckBoxes / style.css”:

import React, { Component } from 'react';
import Size from '../../CheckBoxes/index';

class SizePart extends Component {
    availableSizes = ['XS', 'S', 'M', 'ML', 'L', 'XL', 'XXL'];

    createCheckboxes = () => {
        this.availableSizes.map((size) => {
            return < Size size={size}/>
        });
    }


    render(){
        return (
            <div className="filters">
                <h4 className="title">Sizes:</h4>
                {this.createCheckboxes()}
            </div>
        )
    }
}

export default SizePart;

///////////////////////////////////////////////// //////////////////////

import React, { Component } from 'react';
import "./style.css";

const Size = props => {
    return <div className='size'>{props.size}</div>
}

export default Size;

1 个答案:

答案 0 :(得分:1)

您不返回数组。

  getStatus = () => {

    let url = this.getEnvUrl();

    return fetch(url)
      .then(res => (_.get(res, 'status', 500) == 200)
        ? res : Promise.reject('Fetch had a non-200 response.'))
      .then(res => res.json() )
      .catch(err => Promise.reject(err));
  }