参考错误：未定义提供

问题描述

我是一个全新的反应者，我在这个问题上坚持了好几个小时。反应部分运行良好。我正在添加 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的构建时没有错误。

解决方法

试试这个：

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>
        );
      }
    }

,

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

{(provided) => (

)}