小编som*_*one的帖子

我有以下代码（也粘贴在下面），我想在其中制作两列的布局。在第一个中我放置了两个图像，在第二个中显示了一些文本。

在第一列中，我想要第一张图像width:70%和第二张图像position:absolute。最终结果应该是这样的

正如您所看到的，在上面的每个屏幕中，第二个图像部分位于第一个图像中768px。

我可以在第一个图像上部分定位第二个图像，但这不是动态的，如果您更改屏幕尺寸，您可以看到它是如何折叠的。

但无论我如何努力，我都达不到这个结果。

.checkoutWrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.coverIMGLast {
  width: 70%;
  height: 100vh;
}

/* this .phone class should be dynamically  located partially on first image */
.phone {
  position: absolute;
  height: 90%;
  top: 5%;
  bottom: 5%;
  margin-left: 18%;
}

.CheckoutProcess {
  padding: 5.8rem 6.4rem;
}

.someContent {
  border: 1px solid red;
}

/* removing for demo purposes
@media screen and (max-width: 768px) {
  .checkoutWrapper …

我正在研究 ant design 日历文档。

我想在当月的特定日期设置事件。我正在使用这段提供蚂蚁设计文档的代码。但在他们的代码中，每个月都会显示创建的事件。

例如，我如何才能仅在四月显示？

因为就我而言，我应该从后端接收不同年份、月份和日期的事件列表，并显示在日历中。

这是ant设计文档代码

    function getListData(value) {
     let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: "warning", content: "This is warning event." },
            { type: "success", content: "This is usual event." }
          ];
          break;
        default:
      }
      return listData || [];
    }

    function dateCellRender(value) {
      const listData = getListData(value);
      return (
        <ul className="events">
          {listData.map((item) => (
            <li key={item.content}>
              <Badge status={item.type} text={item.content} />
            </li>
          ))}
        </ul>
      );
    }

    ReactDOM.render(
      <Calendar dateCellRender={dateCellRender} …

我有以下代码

    const SelectSizesDemo = () => {
      const pattern = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
      const errorMsg = "please provide valid email!";

      const [emailArr, setEmailArr] = useState([]);
      const [error, setError] = useState(false);

      return (
        <div>
          <Select
            style={{ width: "90%" }}
            mode="tags"
            onChange={(e) => setEmailArr(e)}
          ></Select>
          {error && errorMsg}
        </div>
      );
    };

我正在尝试执行以下操作。用户应该输入一些电子邮件，如果其电子邮件对 my 有效pattern，那么我应该将其添加到 my 中emailArr，如果不正确，那么我应该显示错误消息errorMsg，从所选项目中清除，并且不允许用户将其添加到数组中。

在此代码中，我成功地可以将任何字符串添加到我的数组中，因此我希望您帮助了解如何使用我的pattern.

请帮我解决这个问题。

谢谢

我有以下数组

    const arr = [
      {
       Images: [{ id: 1 }, { id: 2 }, { id: 3 }],
       MediaCategoryName: "Exterior",
       id: 51
      },

       {
       Images: [{ id: 7 }, { id: 8 }, { id: 9 }],
       MediaCategoryName: "Construction",
       id: 687
      },

      {
      Images: [{ id: 10 }, { id: 11 }, { id: 21 }],
      MediaCategoryName: "home",
      id: 755
     }
    ];

我如何从它们创建新数组并仅放置Images？

我需要这样的东西

newArr = [ { id: 1 }, { id: 2 }, { id: …

大家好，我有以下数组

    const arr = [
      {
       ImageFileSet: [{ id: 1 }],
       LineItemFile: "new name",
       LineItemRef: "PDF",
       id: 44  
      },

       {
       ImageFileSet: [{ id: 7 }, { id: 8 }, { id: 9 }],
       LineItemFile: null,
       LineItemRef: "Image"
       id: 124
      },

    ];

我正在尝试使用以下代码将新数组中的对象数组分组

    const allFiles = arr .flatMap(({ ImageFileSet }) => [ImageFileSet]);

输出是

    [ { id: 1 }, { id: 7 }, { id: 8 }, { id: 9 } ]

现在我怎样才能LineItemFile为每个对象添加？

我想要最终结果类似

    [ { id: 1,  LineItemFile: "new …