Question

我正在尝试遵循this教程。在这方面，我在React.js中有以下代码

<?php

use Illuminate\Database\Query\Builder as QueryBuilder;

abstract class Model extends \Illuminate\Database\Eloquent\Model
{
    protected function newBaseQueryBuilder()
    {
        $connection = $this->getConnection();

        return new class(
            $connection,
            $connection->getQueryGrammar(),
            $connection->getPostProcessor()
        ) extends QueryBuilder {
            protected function addDynamic($segment, $connector, $parameters, $index)
            {
                $bool = strtolower($connector);

                // here we remove the Str::snake (in illuminate/database/Query/Builder.php)
                $this->where($segment, '=', $parameters[$index], $bool);
            }
        };
    }
}

我遇到如下错误

为什么我会收到此错误？问题在render () { const { items } = this.state; return ( <Container> <Button color = "dark" style = { { marginBottom: '2rem' } } onClick = { () => { const name = prompt( 'Enter Item' ); if(name) { this.setState( state => ( { items: [...state.items, { id: uuid(), name }] } )); } } } >Add Item</Button> <ListGroup> <TransitionGroup className="shopping-list"> { items.map(({id, name}) => { <CSSTransition key = { id } timeout = { 500 } classNames = "fade" > <ListGroupItem> { name } </ListGroupItem> </CSSTransition> }) } </TransitionGroup> </ListGroup> </Container> ); }内部。我尝试了几种方法，但找不到解决方案。

UPDATE

如果我使用下面的代码，我不会出现任何错误

.map()

Answer 1

地图上没有任何内容。将您的代码更新为关注代码，它将起作用。

<ListGroup>
   <TransitionGroup className="shopping-list">
      { 
        items.map(({id, name}) => {
         return (<CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
              <ListGroupItem>
                 { name }
              </ListGroupItem>
         </CSSTransition>)
         })
      }
   </TransitionGroup>
</ListGroup>

Answer 2

您忘记了块语句中的return关键字

<ListGroup>
   <TransitionGroup className="shopping-list">
     { 
       items.map(({id, name}) => {
          return <CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
               <ListGroupItem>
                 { name }
               </ListGroupItem>
             </CSSTransition>
        })
     }
   </TransitionGroup>
</ListGroup>

Answer 3

尝试在div周围和内部包裹span或CSSTransition。

<ListGroup>
  <TransitionGroup className="shopping-list">
    { items.map(({id, name}) => (
        <div key={id}>
          <CSSTransition key = { id } timeout = { 500 } classNames = "fade" >
            <div>
              <ListGroupItem>
                { name }
              </ListGroupItem>
            </div>
          </CSSTransition>
        </div>
    ))}
  </TransitionGroup>
</ListGroup>

react-transition-group版本1和版本2之间也存在巨大差异。请确保使用适当的版本（使用v1更容易）。

看看这个工作示例：https://codesandbox.io/s/2pyrr8l33n

import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";

export default class Example extends Component {
  state = {
    isVisible: true,
    text: ["Wow", "this", "works!"]
  };

  handleClick = () =>
    this.setState(prevState => ({
      isVisible: !this.state.isVisible
    }));

  render = () => (
    <div style={{ padding: "20px" }}>
      <div style={{ marginBottom: 30 }}>
        <CSSTransition
          in={this.state.isVisible}
          timeout={300}
          classNames="messagein"
          unmountOnExit
        >
          <div style={{ marginTop: 20 }} className="messageout">
            {this.state.text.map(text => <p key={text}>{text}</p>)}
          </div>
        </CSSTransition>
      </div>
      <button
        className="uk-button uk-button-primary"
        onClick={this.handleClick}
      >
        {this.state.isVisible ? "Hide" : "Show"} Text
      </button>
    </div>
  );
}

React中的.map（）问题

3 个答案: