如何将prop传递给可变长度的子级数组中的子级组件？

Question

How can I fire a callback in a child component that will then pass data to a sibling component, in a specific position of the array of component children?

I have 3 components, App, Col, and Task. The hierarchy is that the App contains any number of Column component, which each in turn contain any number of Task components. The high level goal is to move a Task from one Column, to a sibling, at the firing of a callback.

However the parent component, App, doesn't seem to have any knowledge of which Column component lives at which Index. Codepen for easy viewing

class App extends React.Component {
constructor() {
    super();
    this.state = {
    cols: [
        'a',
        'b',
        'c',
        'd',
    ]
    }
}

moveCard = (dir) => {
    console.log(dir);
    console.log(this.state);
}

render() {
    return (
    <div className="main" style={{
        gridTemplateColumns: 'repeat('+this.state.cols.length+', 1fr)',
    }}>
        {this.state.cols.map((col, i) => <Column key={i} moveCard={this.moveCard} name={col} />)}
    </div>
    );
}
} 

const Task = ({text, moveCard}) => {
return (
    <div className="card">
    <div onClick={e => moveCard(e, -1)}>{'<'}</div>
    <div>{text}</div>
    <div onClick={e => moveCard(e, 1)}>{'>'}</div>
    </div>
);
};

class Column extends React.Component {
constructor(props) {
    super();
    this.state = {
    tasks: ['a', 'b'],
    }
}

render() {
    return (
    <div className="col">
        <header>{this.props.name}</header>
        {this.state.tasks.map((tasktText, id) => <Task key={id} text={tasktText} moveCard={e => {
        const updatedState = this.state.tasks;
        updatedState.splice(updatedState.indexOf(tasktText), 1);
        this.setState({
            tasks: updatedState,
        });
        this.props.moveCard(tasktText);
        }} />)}
    </div>
    );
}
}

The task is removed from the column correctly, however the parent most component function moveCard has all the pertinent information, but no reference to each children, as they are simply mapped in the render call. How should I restructure my code so that for example, when the right arrow is clicked on the top task in column 1, it disappears from column one, and reappears at the bottom of column 2?

Answer 1

My approach would be to keep all the column and task information in the state of the <App /> component.

The moveCard() prop in <Column /> should hand over the relevant task info; Title, old column and new column.

The handler in <App /> then updates its state (= move task to new column) – the columns get updated.

Answer 2

Move all of the state to one place to manage. An example would be to move all data and indexes to the App component. An example is here:

https://stackblitz.com/edit/react-uz7xyq

This is using Context API to prevent prop drilling. Redux would be a good mechanism for managing this as it grows

this.state = {
  cols: [
    { name: 'A', tasks: ['A', 'B']},
    { name: 'B', tasks: ['C', 'D']},
    { name: 'C', tasks: ['E', 'F']}
  ]
};

this.state.move = (isRight, colName, taskName) => {
  const index = this.state.cols.findIndex(x => x.name === colName);
  if ((!isRight && index > 0) || (isRight && index < this.state.cols.length - 1)) {
    this.state.cols[index].tasks = this.state.cols[index].tasks.filter(x => x !== taskName);
    const index2 = isRight ? 1 : -1;
    this.state.cols[index + index2].tasks = [...this.state.cols[index + index2].tasks, taskName];
    this.setState({ cols: this.state.cols });
  }
};

(Ideally you should also not mutate state as I have done)