如何將（this）道具傳遞給React中的兄弟組件

Question

我正在映射一個數據列表，其中每個列表都有一個按鈕，該按鈕打開一個模式以顯示完整列表的數據。 除了要用一個包含每個列表所映射的自身模態組件的按鈕映射每個條目之外，我希望每個按鈕都觸發一個外部模態組件。

handleTaskModal = () =>{

    <TaskModal {...state} />
  }


  render() {
    const { tasks } = this.state;

    return (
      <div>
        <Container color="light">

          <Row className="flex-row">
            {tasks.map(({ name, image, description }) => (
                <Col key={name}
                  xs="11"
                  sm="6"
                  lg="4"
                  className="mx-auto my-sm-2 my-lg-1"
                  >
                    <Card className="task-card border-0 rounded shadow-sm my-3">
                      <CardImg
                        top
                        width="100%"
                        src={image}
                        style={{
                          width: "100%",
                          height: "45vh",
                          objectFit: "cover"
                        }}/>

                      <CardBody>
                        <CardTitle className="card-title p-0 text-left">{name}</CardTitle>

                      </CardBody>
                        <Button
                          color="primary"
                          className="w-50 rounded mb-3 mx-auto shadow-sm"
                          style={{
                            borderRadius:"20px"
                          }}
                          onClick={this.handleTaskModal}
                          > View Task
                        </Button>
                    </Card>
                </Col>
            ))}
          </Row>

        </Container>

      </div>
    );
  }

Answer 1

我想在一個模態組件的每個條目之間共享道具

您不會在反應中這樣做。 數據總是從父母流向孩子，而不是在兄弟姐妹之間。 通過提供處理程序，動作可以從孩子流向父母。 解決此問題的正確方法是將當前查看的任務存儲在父狀態並相應地顯示模式：

class Tasks extends Component {
  state = {
      viewed: null,
  };

  handleShow = name => this.setState({viewed: name});
  handleClose = () => this.setState({viewed: null});    

  render() {
      const {tasks, viewed} = this.state;

      return (
        <div>
          <Container>
            <Row>
              {/* details omitted for simplicity */}
              {tasks.map(({name, image, description}) => (
                <Col key={name}>
                  <Button onClick={() => this.handleShow(name)}>View Task</Button>
                </Col>
              ))}
            </Row>
          </Container>
          {viewed && (
            <TaskModal 
              task={tasks.find(task => task.name === viewed)}
              onClose={this.handleClose}
            />
          )}
        </div>
      );
  }
}

另請注意，處理程序應修改狀態以觸發重新渲染。 從它們返回的東西（例如組件）沒有任何效果。