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

您需要将希望导入的对象导出到其他文件中。

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

，然后使用

导入另一个文件

import { ArrDurion } from 'ArrDurion';

Answer 2

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

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的导入

如何将部分逻辑传输到另一个文件

2 个答案: