小编Jon*_*s.D的帖子

我一直试图让我的图像在同一行上彼此相邻，如果需要，只需将它们裁剪成更小的尺寸。为什么不起作用object-fit？

HTML：

<div class="gallery">
  <div class="inner"><img src="images/image1.jpg"></div>
  <div class="inner"><img src="images/image2.jpg"></div>
  <div class="inner"><img src="images/image3.jpg"></div>
</div>

CSS：

.gallery{
  width: 1000px;
  height: 300px;
  display: flex;
}

.inner{
   width: 333px;
   height: 300px;
}

.inner img{
   object-fit: contain;
}

我正在尝试将道具传递给 Link 元素的路线。但是当我打开 invoiceDetails 组件时，我说 props 是未定义的。

下面是我试图传递道具的方式。它设置正确，因为它转到 InvoiceDetails 组件。我在 index.js 中声明了路由

<Link props={{name: 'jack', age: 25, city: 'Antwerp'}}to='/InvoiceDetails'><p>VIEW</p></Link>

在 InvoiceDetails 组件中

import React from 'react'
import DashboardHeader from '../dashboardHeader/dashboardHeader'
import { Link } from 'react-router-dom'
function InvoiceDetails(){
console.log(props)
    return(
        <div className='w-10/12 bg-gray-300 float-right min-h-screen'>
          <div className='w-10/12 fixed z-50'>
.........
)
}
export default invoiceDetails

我想使用从全局 redux 状态获取的变量将道具传递给 invoicedetails 组件。现在静态数据很好，我想同样的原则也适用。

我正在尝试使用从父组件获取的 props 更新组件的状态，但收到以下错误消息：

太多的重新渲染。React 限制渲染次数以防止无限循环。

如果道具更改，我希望本地状态更新。类似的帖子（使用道具更新组件的状态，更新与上反应子组件道具状态，更新使用道具组件的状态），没有固定的对我来说。

import React, {useState} from "react"


const HomeWorld = (props) => {
    const [planetData, setPlanetData] = useState([]);
    if(props.Selected === true){
        setPlanetData(props.Planet)
        console.log(planetData)
    }


    return(
        <h1>hi i am your starship, type: {planetData}</h1>
    )
}

export default HomeWorld

取消选中复选框后，我希望该表格消失。它必须仅基于JavaScript（用于学校的运动）。

复选框的创建有效，但是我无法将显示样式设置为“无”

还有更多的TR，但是我删除了大多数TR，因为它对解决以下代码没有任何附加价值。

// Get parent of checkbox

var searchTr = document.querySelectorAll("#searchTable tr");

// add checkbox to parent

for (i = 1; i < searchTr.length; i++) {

  var chkbox = document.createElement("input");
  chkbox.type = "checkbox";
  chkbox.setAttribute("class", "chkbox");
  searchTr[i].appendChild(chkbox);
  chkbox.checked = true;
  chkbox.addEventListener("change", hideMe);

  function hideMe() {
    searchTr[i].style.display = "none";

  }
}

<table id="searchTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="th-sm">Name
      </th>
      <th class="th-sm">Position
      </th>
      <th class="th-sm">Office
      </th>
      <th class="th-sm">Age
      </th>
      <th class="th-sm">Start date
      </th>
      <th class="th-sm">Salary
      </th>
    </tr>
  </thead> …