如何在 reactjs 和 ant 设计中使第一个下拉列表不呈现答案

【问题标题】：How to make first dropdown not render in reactjs and ant design如何在 reactjs 和 ant 设计中使第一个下拉列表不呈现
【发布时间】：2022-08-18 19:18:03
【问题描述】：

我需要使我当前的可拖动组件的下拉列表不在特定单元格（特别是第一行）上呈现。但是，它仍然会显示没有下拉列表的单元格。我试图寻找一种方法，但找不到任何方法。感谢提供的任何帮助/指示。谢谢！我还附上了当前和预期的屏幕截图。（请注意下拉菜单为空）

*当前界面 - 呈现所有下拉菜单

*预期的新界面 - 第一个下拉菜单未呈现

带有 ant 设计组件 Row/Col 和 Select/Option 下拉菜单的主要代码：

render() {
    return (
      <div>
        <Table
          scroll={{ x: 300 }}
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: true,
            pageSizeOptions: [\'10\', \'25\', \'50\'],
          }}
          columns={this.state.columns}
          dataSource={this.state.datas}
        ></Table>

        <Modal
          destroyOnClose={true}
          width={\'80%\'}
          title=\'Approval Sequence\'
          visible={this.state.isVisible}
          onOk={() => {

            updateFlowType(this.state.currentItem.id, {
              name: this.state.currentItem.name,
              sites: this.state.initTags.map((x) => ({
                idSite: x.id,
                returnToStep: x.returnToStep,
              })),
            })
              .then((r) => {
                notification[\'sucess\']({
                  message: \'Success\',
                  description: \'Save data success\',
                });
                this.setState({ isVisible: false });
                this.getData();
              })
              .catch(() => {
                notification[\'failed\']({
                  message: \'Failed\',
                  description: \'Failed to save\',
                });
              });
          }}
          onCancel={() => {
            this.setState({ isVisible: false });
          }}
        >

          <Row gutter={[2, 2]}>
            <Col style={{ textAlign: \'center\' }} span={8}>
              <Text strong>Role</Text>
            </Col>
            <Col style={{ textAlign: \'center\' }} span={8}>
              <Text strong> Return to Department: </Text>
            </Col>
          </Row>

          <div className=\'list-area\'>
            <div className=\'drag-list\'>
              <DraggableArea
                onChange={(initTags) => this.setState({ initTags })}
                isList
                tags={this.state.initTags}
                render={({ tag }) => (
                  <Row>
                    <Col span={8}>
                      <Button style={{ width: \'100%\' }}>{tag.name}</Button>
                    </Col>

                    <Col span={16}>
                      <Select
                        onChange={(e) => {
                          //create clone
                          let clone = [...this.state.initTags];
                          
                          let item = clone.find((x) => x.id === tag.id);
                          
                          let itemReject = clone.find((x) => x.name === e);

                          console.log(\'itemReject\', itemReject);
                          //create returnToStep in item 
                          item.returnToStep = itemReject.id;
                          this.setState({
                            initTags: clone,
                          });
                        }}
                        //placeholder = \'Select return step\'
                        style={{ width: \'100%\' }}
                      >
                        {this.getReject(tag.name).map((newTag) => (
                        //getReject function will slice to get only items before the current iteration object (e.g. if current is index 3, only get index 0~2)
                          <Option key={newTag.name} value={newTag.name}>
                            {newTag.name}
                          </Option>
                        ))}
                      </Select>
                    </Col>
                  </Row>
                )}
              ></DraggableArea>
            </div>
          </div>
        </Modal>
      </div>
    );
  }

标签： javascript reactjs axios antd

【解决方案1】：

您可以使用这样的条件和组件进行“条件渲染”：

const someBoolean = true;
retrun ( 
    { someBoolean && <SomeComponent /> }
)

如果someBoolean 为真，则<SomeComponent/> 将显示。
如果someBoolean 为假，则<SomeComponent/> 将不会显示。

因此，只需使用它来有条件地呈现您的下拉列或任何其他组件。

【讨论】：