ReferenceError:未定义提供

Question

我对此的反应是全新的，我被困在这上面好几个小时了。反应部份运作良好。我正在添加react-beautiful-dnd以作出反应。我正在使用npm安装react-beautiful-dnd包。没有对该方案采取任何其他行动。我正在学习这教程

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的构建时没有出现错误。

Answer 1

感谢大家付出的时间和努力。问题在于我如何在代码中实现provided包装器。我已经将代码更改为下面的代码，现在它运行良好。

{(provided) => (

)}

Answer 2

试试这个：

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