如何为数组中的特定元素呈现组件

Question

我有一个数组，仅当数组长度大于 2 时才需要显示一个组件（在我的例子中是 <span>Delete</span>），并且不显示在前两个数组元素中，而是显示在其他元素。

示例： array = ["一","二","三","四"] 由于数组长度大于 2，因此在“三”和“四”中显示 <span>Delete</span>。在上面的例子中，即使数组的长度大于 2，也不会在前两个元素（ "One" 和 "Two" ）中显示。

代码：

const App = () => {
  const [element, setElement] = useState(["element"]);

  return (
    <>
      {element.map((e) => (
        <div>
          <span>{e}</span>
          {element.length > 2 &&  <span style={{color:"red"}}>{" "}Delete</span>}
          </div>
      ))}

      <button onClick={() => setElement((element) => [...element, "element"])}>Add</button>
    </>
  );
};

以上代码显示了所有元素中的“删除”文本

应该只显示第二个索引之后的元素。

代码沙箱：https://codesandbox.io/s/basic-antd-4-16-9-forked-2w3lg5?file=/index.js:98-478

Answer 1

你可以这样做

{element.length > 2 && element.map((ele,index) => {
    if(index > 1){
        return <p>{ele}</p>
    }
    else{
        return <></>
    }
})}

Answer 2

使用您正在迭代的元素的索引（.map 回调中的第二个参数）来检查索引是否为 2 或更多 - 如果是，您可以显示删除，否则不要显示它。

const App = () => {
  const [elements, setElements] = useState(["element"]);

  return (
    <>
      {elements.map((e, i) => (
        <div>
          <span>{e}</span>
          {elements.length > 2 && i >= 2 && <span style={{color:"red"}}>{" "}Delete</span>}
        </div>
      ))}

(因为状态是一个数组，所以将其名称设为复数比单数 element 更有意义，这听起来像一个数组 item)

Answer 3

您还需要检查当前项目的索引是否大于1。

const App = () => {
  const [element, setElement] = React.useState(["element"]);

  return (
    <React.Fragment>
      {element.map((e, i) => (
        <div>
          <span>{e}</span>
          {i > 1 && element.length > 2 && <span style={{ color: "red" }}>Delete</span>}
        </div>
      ))}

      <button onClick={() => setElement((element) => [...element, "element"])}>
        Add
      </button>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 4

您需要访问当前元素 (e) 的当前索引，因此将其包含在 map() 的参数列表中。

其次，判断索引(idx)是否大于等于(>=)的条件 2.

const App = () => {
  const [element, setElement] = useState(["element"]);

  return (
    <>
      {element.map((e, idx) => (
        <div>
          <span>{e}</span>        
          {element.length && idx >= 2 && <span style={{color:"red"}}>{" "}Delete</span>}
        </div>
      ))}

      <button onClick={() => setElement((element) => [...element, "element"])}>Add</button>
    </>
  );
};

如何为数组中的特定元素呈现组件

How to render a component for particular element in a array

javascript

arrays

reactjs