在 React 组件的渲染方法中，我该怎么做才能将道具仅应用于 map/array 中的一个项目？

Question

我正在尝试根据道具将更改仅应用于数组中的一项。我有这个列表：

interface FieldProps {
  fileLimitWarning?: // I STILL NEED TO FIGURE THIS OUT
}

const DataField = (props: FieldProps) => {
 const { fileLimitWarning, handleFileSelection } = props;

 return (
   <>
     {fileLimitWarning && <p>This file exceeds the max size of 250mb</p>}
     <input onChange={e => handleFileSelection(e.target.files)} />
   </>
}

const ContainerOfDataField = () => {
 const [fileLimitWarning, setFileLimitWarning] = useState(false);

 const handleFileSelection = (files) => {
    setFileLimitWarning(false);
    const [currentFile] = files;

    if(currentFile?.size <= 250000000) {
      setFileLimitWarning(true);
    }
 }

 return (
      <ul>
        {
          fields?.map((promoField: Field, index: number) => {
            return (
              <DataField
                key={index}
                fileLimitWarning={fileLimitWarning}
                handleFileSelection={handleFileSelection}
              />
            );
          })
        }
      </ul>
 )  
}

在这种情况下，我想要的只是 return 在 DataField 组件对应时为 null。现在，每当 ContainerOfDataField 组件上的 fileLimitWarning === true 时，它 hides/removes/deletes 来自 DataField 组件的所有 Typography 节点。所以我需要的是只隐藏与问题来源相匹配的索引。

清楚了吗？

Answer 1

我认为理想情况下，您会在地图的每次迭代中定义 fileLimitWarning，因为（我假设）它是当前项目的属性，而不是全局属性 :

  return (
      <ul>
        {
          fields?.map((promoField: Field, index: number) => {
            // { currentFile } = promoField???
            return (
              <DataField
                key={index}
                fileLimitWarning={currentFile?.size <= 250000000}
                handleFileSelection={handleFileSelection}
              />
            );
          })
        }
      </ul>
    )  
  }

在 React 组件的渲染方法中，我该怎么做才能将道具仅应用于 map/array 中的一个项目？

What can I do to apply a prop to only one item in a map/array on the render method of a React component?

javascript

arrays

typescript

ecmascript-6

reactjs