如何从Next.js中的动态创建函数组件中获取值

Question

我有一个组件数量。它改变了。我动态添加尽可能多的功能组件。 然后我想获取变量的值。

const MainComponent: React.FC<Props> = ({ fields, label, addCount }) => {


const components = () => {
    
    const comps = [];
    for (let index = 0; index < addCount; index++) {
    comps.push(<CampaignConfigurationProperty fields={fields[index]} label={label}></CampaignConfigurationProperty>);
    }
    return comps;
};


return (
    <div>
    <p>{label}</p>
    <div className={styles.anotherText + " " + styles.endText + " col"}>
    {components()}
    </div>
    </div>

);
};
export default MainComponent;

Answer 1

我认为这是代码有错误，但这对您有帮助！

const MainComponent: React.FC<Props> = ({ fields, label, addCount }) => {

    const [comps , setComps] = useState<any>([])
    useEffect(() => {
       const components = () => {
         const x = []
         for (let index = 0; index < addCount; index++) {
         x.push({fild: fields[index]} ,label :label );
        }
       return comps;
       };
       setComps(components())
    },[])



return (
    <div>
    <p>{label}</p>
    <div className={styles.anotherText + " " + styles.endText + " col"}>
{comps.map((i , index) => 
    <CampaignConfigurationProperty key={index} fields={i.fild} label={i.label} />
)}
    </div>
    </div>

);
};
export default MainComponent;