reactjs - 如何将部分逻辑转移到另一个文件

Question

我展示了我的一小部分代码

function App({}) {
  const [list, setList] = useState([]);
  const [Indx, setIndx] = useState(0);

  useEffect(({durion}) => {

        setList(durion.map((value, index) => (<Durion
              key= {`${value}`}
              Length={`${index}`}
              Name= {`${value}`}
              ...
              onClick= {() => {
                setIndx(index);
              }}/>
            ))
        );

  }, []);

如何将一年中的这部分内容写入 ArrDurion.js 文件；

 (<Durion  key= {`${value}`}
              Length={`${index}`}
              Name= {`${value}`}
              ...
              onClick= {() => {
                setIndx(index);
              }}/>
            )

ArrDurion.js

const ArrDurion = (<Durion  key= {`${value}`}
                  Length={`${index}`}
                  Name= {`${value}`}
                  ...
                  onClick= {() => {
                    setIndx(index);
                  }}/>

)

然后导入到 App.js 文件。 但我收到错误 setIndx(index) 不存在，

您可以展示三种编写代码的方法。要将这部分代码写入ArrDurion.js 文件中，然后在App.js 中使用它。 如果您知道减少代码的其他方法可以显示您的选择。

Answer 1

将 setindx, value, index 作为 prop 传递并转换为无状态组件

ArrDurian.jsx

import Durian from './durianFile';
export const ArrDurion = ({index, value, onClickProp}) => {
    return (
          <Durion  
             key= {`${value}`}
             Length={`${index}`}
             Name= {`${value}`}
             onClick= {() => onClickProp(index)}
          />
        );
};

然后导入到另一个文件App.js并按如下方式使用

import { ArrDurion } from 'ArrDurion';
function App({}) {
 const [list, setList] = useState([]);
 const [Indx, setIndx] = useState(0);

  useEffect(({durion}) => {
    setList(durion.map((value, index) => 
          <ArrDurian onClickProp={setIndx} value={value} index={index} />
        )
    );
 }, []);

导入时请注意Default 和Named 导入