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

React完全是关于在组件树中向下流动的数据的。因此水平数据流是反模式的，因为它可能导致不可预测的行为。如果您面临着需要将数据传递给同级的情况，那么您应该在React way中重新考虑应用程序的结构。通常只需将组件包装在Parent组件中即可解决此问题：

const Parent = ({commonProp}) =>{
    return(
        <>
            <ChildA prop={commonProp} />
            <ChildB props={commonProp} />
        </>
    )
}

Answer 2

我想在一个模态组件的每个条目之间共享道具

您不会在反应中这样做。数据总是从父母流向孩子，而不是在兄弟姐妹之间。通过提供处理程序，动作可以从孩子流向父母。解决此问题的正确方法是将当前查看的任务存储在父状态并相应地显示模式：

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

还请注意，处理程序应修改状态以触发重新渲染。从它们那里返回一些东西（例如组件）没有任何作用。

如何将（this）道具传递给React中的兄弟组件

2 个答案: