ReferenceError: provided is not defined

Question

我对反应完全陌生，而且我坚持了很多小时。反应部分运作良好。我正在添加 react-beautiful-dnd 来做出反应。我正在使用 npm 安装 react-beautiful-dnd 包。没有对包执行其他操作。我正在关注 this 教程

const Component = wp.element.Component;
import initialData from './initial-data';
import Column from './column.jsx';
import {DragDropContext} from 'react-beautiful-dnd';

class App extends Component{
    state = initialData;
    render(){
        return(
            <DragDropContext onDragEnd={this.onDragEnd}>
                {this.state.columnOrder.map(columnId => {
                    const column = this.state.columns[columnId];
                    const tasks = column.taskIds.map(taskId => this.state.tasks[taskId]);
                    return <Column key={column.id} column={column} tasks={tasks} />;
                })}
            </DragDropContext>
        );
    }
}
wp.element.render(<App  />, document.getElementById('react_content'));

列组件

const Component = wp.element.Component;
import Task from './task.jsx';
import {Droppable} from 'react-beautiful-dnd'

export default class Column extends Component {
  render() {
    return (
        <div id="container">
            <h3>{this.props.column.title}</h3>
            <Droppable droppableId={this.props.column.id}>
                {provided => (
                    <div id="taskList" innerRef={provided.innerRef}{...provided.droppableProps}>
                      {this.props.tasks.map((task,index) => <Task key={task.id} task={task} index={index}  />)}
                      {provided.placeholder}
                    </div>
                )}
            </Droppable>
        </div>
    );
  }
}

任务组件

const Component = wp.element.Component;
import { Draggable } from 'react-beautiful-dnd';

export default class Task extends Component {
  render() {
    return(
        <Draggable draggableId={this.props.task.id} index={this.props.index}>
            (provided => {
                <div class="tasks"
                {...provided.draggableProps}
                {...provided.dragHandleProps}
                innerRef={provided.innerRef}>
                {this.props.task.content}
                </div>
            })
        </Draggable>
    );
  }
}

我收到 provided 未定义的错误。是因为包没有正确导入吗？构建react js时没有报错

Answer 1

试试这个：

export default class Task extends Component {
     constructor(props) {
            super(props);
       }
      render() {
        return(
            <Draggable draggableId={this.props.task.id} index={this.props.index}>
    
             {(provided) => (
                  <div class="tasks"
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}>
                    {this.props.task.content}
                    </div>
            )}
    </Draggable>
        );
      }
    }

Answer 2

感谢大家付出的时间和精力。问题在于我如何在我的代码中实现 provided 包装器。我已将代码更改为以下内容，现在可以正常工作了。

{(provided) => (

)}

ReferenceError: provided is not defined

ReferenceError: provided is not defined

reactjs

react-beautiful-dnd