小编Emi*_*ron的帖子

我正在尝试使用gulp.src和gulp.dest从我的基目录复制多个文件和文件夹.到一个新的子目录dist.

基目录是Symfony项目的根目录.

这是我的gulpfile:

var files = [
  './app**/*.*',
  './bin**/*.*',
  './src**/*.*',
  './tests**/*.*',
  './var/',
  './vendor/',
  './composer.json']

gulp.task('distribute', function() {
  return gulp.src(files , { base: '.' }).pipe(gulp.dest('./dist'));
});

我只是不明白,为什么这不起作用.结果,我得到一个dist包含指定文件夹内容的文件夹.所以app,bin,src等被失踪根文件夹.

我正在尝试使用 Vue 和 Express 制作一个聊天应用程序。

目前，我想让包含消息的容器在发送新消息时自动滚动到底部。scrollToEnd我尝试使用一个选择 div 容器并将其分配scrollHeight给以下函数来做到这一点scrollTop：

scrollToEnd: function () {
    var messages = this.$el.querySelector('#messages')
    messages.scrollTop = messages.scrollHeight
}

这会产生以下错误：

类型错误：无法读取 null 的属性“scrollHeight”

由于某种原因，使用querySelector总是返回 null，当我在其他元素上测试它时也是如此。

下面可以找到该组件的完整代码。

<template>
    <div id="messages">
        <ul>
            <li v-for="msg in messages.slice().reverse()">{{ msg.message }}</li>
        </ul>
    </div>
</template>

<script>
import MessageService from '@/services/MessageService'

export default {
    name: 'messages',
    data () {
        return {
            messages: []
        }
    },
    mounted () {
        this.getMessages()

        this.$root.$on('newMessage', (msg) => {
            this.message = msg
            this.getMessages()
            this.scrollToEnd() …

我对 Redux 有问题，更可能不是问题而是误会。如果我确实在函数中调度并在商店中写入一个新值，那么我无法立即从商店中获取该函数的新值。

例子：

    testFunc = () => {
        console.log('in func: before', this.props.count);   //state store
        this.props.onButtonIncrementClick();                //dispatch a new state in the store
        console.log('in func: after', this.props.count);    //get the old state store
    };

实例： https : //codesandbox.io/s/yk1jzjv6l1

我怀疑这与异步有关，因为如果我将状态包装在setTimeout()新状态中就会出现。

我很高兴听到解释为什么以及如何将值写入商店并立即从中读取它们。

我如何使用Context API来获取来自另一个组件的数据，并且接受数据的组件应该是一个React.Component（不在功能组件中）。

我想获取驻留在上下文中的数据。提供程序作为组件。我用谷歌搜索了如何使用React Context API，所有的答案都基于使用功能组件，而不是React。零件。

由于我不知道如何使用Context API从其他组件中获取数据，因此我尝试了PubSub-JS，但现在我想使用Context API。

我有一个使用Context API的组件，我想从下面的组件中获取数据。

import React, {Component} from "react";
import axios from "axios";

const VideoInformationContext = React.createContext();

class VideoContext extends Component{

    constructor(props){
        super(props);
        this.state = {
            videoIdx: props.videoIdx
            videoList:null,
            theme:null
        }
    }

    componentDidMount(){
        this.loadResource();
    }

    loadResource(){
        axios({
            url:`<TEST SERVER>?videoIdx=${this.state.videoIdx}`,
            method:"get"
        }).then(response => {
            this.setState({
                videoList:response.data.videosAndTheme.videoList,
                theme:response.data.videosAndTheme.theme
            });
        });
    }

    render(){
        return (
            <VideoInformationContext.Provider value={this.state}>
                {this.props.children}
            </VideoInformationContext.Provider>
        );
    }
}

export const VideoinformationConsumer = VideoInformationContext.Consumer;
export default VideoContext;

所以我的问题是我想ComponentDidMount()在React …

嗨，我需要使用查询参数构造 url 请求，我有一个带有键和值的嵌套对象，如下所示

 "user": {
    "first_name": "Srini",
    "last_name": "Raman",
     "gender": "male",
     "dob": "1992-08-02",
     "address_attributes": {
      "city": "San Diego",
      "state": "CA",
      "zip": 92127,
      "country": "USA",
      "latitude": 37.257009,
      "longitude": -120.050767
    }
}

我需要获得一个查询参数，如

user[first_name]=Srini&user[last_name]=Raman&user[address_attributes][city]=San Diego&user[address_attributes][state]=CA

错误是渲染返回函数中的意外标记，预期为“，”。我正在使用 babel 并将此文件链接到一个 html 文件中。我删除了评论类和组件以供查看。我也删除了评论表单组件。

这是 main.js：

class App extends React.Component {
    constructor(props) {
        super(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = { comments : [] }
    }
    handleSubmit(event) {
        // ...
    }
    render() {
        const comments = this.state.comments.map((comment) => {
            <Comment author={comment.author} message={comment.message} />
        });
        const formcomment = <CommentForm handleSubmit = {this.handleSubmit} />;
        return (
            {comments}
            {formcomment} // ERROR HERE
        )
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

我有一个对象数组

[
    {
      id: 1,
      customtitle: '',
      IconSRC: '',
      btnColor: '',
      inlineSyle: '',
      btnStyle: {
        width: '100px',
        height: '100px',
        flexDirection: 'column',

      },
      num: 1,
    },
    {
      id: 2,
      customtitle: '',
      IconSRC: '',
      btnColor: '',
      inlineSyle: '',
      btnStyle: {
        width: '100px',
        height: '100px',
        flexDirection: 'column',

      },
      num: 2,
    },]

我很困惑让它作为道具验证工作。我需要帮助修复它，我尝试这种方式

Function.propTypes = {
  list: PropTypes.objectOf(PropTypes.shape({
    id: PropTypes.number,
    btnColor: PropTypes.string,
    customTitle: PropTypes.string,
    btnStyle:PropTypes.object
    IconSRC: PropTypes.string,
    inlineSyle: PropTypes.string,
  })),
};
Function.defaultProps = {
  List: [],
}; 

但这没有用。没有这个 proptype，我的组件可以正常工作。但 eslint 显示此文本错误

props 验证 eslint(react/prop-types) …

我想制作一个具有定义宽度的按钮，但我有一个模板，其中定义了包括样式的按钮组件，所以当我尝试修改按钮的样式时，什么也没发生，这是我的代码

这是我在反应类中调用组件的时候

<Button
    className={classes.buttonW}
    component={Link}
    color="success"
    size="lg"
    to="/album-carousel-page"
 >
 Galeria
</Button>

我修改css按钮时的类名

buttonW: {
  width: "100px",
  height: "30px"
}

这是模板原始按钮上方的代码（我认为非常复杂）

  button: {
    minHeight: "auto",
    minWidth: "auto",
    backgroundColor: grayColor,
    color: "#FFFFFF",
    boxShadow:
      "0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)",
    border: "none",
    borderRadius: "3px",
    position: "relative",
    padding: "12px 30px",
    margin: ".3125rem 1px",
    fontSize: "12px",
    fontWeight: "400",
    textTransform: "uppercase",
    letterSpacing: "0",
    willChange: "box-shadow, transform",
    transition:
      "box-shadow …

我从一个简单的 JSX 元素数组开始：

const jsxArray = dataItems.map(item => (
  <div>
    <Header>{item.title}</Header>
    <Paragraph>{item.body}</Paragraph>
    <Paragraph customAttribute={item.isActive} >{item.tags}</Paragraph>    
  </div>
))

在渲染内部，或者更确切地说返回，因为我现在对所有内容都使用函数组件，我想过滤属性isActive被标记为 的JSX 元素true。

return (
  {jsxArray
    .filter(jsxElement => // want to filter in JSX elements 
      // that are true for customAttribute keyed to `item.isActive`)
  }
)

有什么办法可以做到吗？

如果没有一个好的方法，我愿意接受变通办法。

我可以在前面的步骤中简单地过滤数组。但这会导致一些额外的代码重复，因为我在其他地方仍然需要未过滤的 JSX 元素数组。

我正在为电子商务网站实施购物车。购物车是一个由对象数组表示的状态变量shopCart。每个对象都包含有关产品的信息，例如标题和价格。我正在尝试实现一个删除按钮，它实际上正在执行它的意图，即从shopCart状态中删除项目，但更改未显示在屏幕渲染上。我可以清空购物车，但屏幕仍然显示产品。这是购物车页面的主要代码：

return (
            <div class={styles.container}>
                <h1>Product</h1><h1>Quantity</h1><h1>Unit price</h1><h1>Total price</h1><div></div>
                {
                    shopCart.map((product, i, array)   => <CartItem key={product.id} product={product} index={i} array={array}/>)
                }
            </div>
        )

这是 CartItem.js 的实现

const CartItem = (props) => {
    let { shopCart, setShopCart } = useContext(Context);
    let product = props.product;

// takes the identification of a shopping cart product and removes it from the cart
    const decrease = (element) => {
        shopCart.forEach((el, i) => {
            if (el.hasOwnProperty('id')) {
                if (el.id === element) {
                    let aux …