使用鈎子動態添加組件

Question

我有 3 個組件：Form（父）、Picklist 和 ParagraphBox（子）； 基於選擇列表的選擇，我渲染了 ParagraphBox 和一個“+”按鈕。 我想要實現的是單擊加號按鈕，在第一個下方呈現另一個 ParagraphBox。 我也想要刪除功能。

我的 ParagraphBox 組件有一個標題和一個內容，我想給添加一個漸進的數字：例如第 1 段內容：....第 2 段內容：....等等這是我的 ParagraphBox 組件：

import React, { useState, useEffect } from 'react';


export default function ParagraphBox(props) {

const [paragrafo, setParagrafo] = useState({})

useEffect(() => {
    console.log('paragrafo ', paragrafo)
    props.onChange(paragrafo)
}, [paragrafo])

const onChange = (e) => {
    const titolo = e.target.name
    const contenuto = e.target.value
    setParagrafo({
        ...paragrafo,
        [titolo]: contenuto
    })
}

return (
    <div className = "paragraph-box">
        <label>
            {props.labelInputBox}
            <div>
                <input type="text" name="titolo" value={paragrafo.titolo || ''} onChange={onChange}/>
            </div>
            {props.labelTextArea}
            <div>
                <textarea id="subject" name="contenuto" placeholder="Inserisci contenuto.." style={{height: "45x", width: "400px"}} value={paragrafo.contenuto || ''} onChange={onChange} />
            </div>
        </label>
    </div>
 )
}

這是我的表單組件：

import React, { useState, useEffect, useRef } from 'react';
import './Form.css'
import createDocument from '../pdfTool';
import finalita from '../icons/finalita.PNG';
import Picklist from './Picklist.js';
import ParagraphBox from './ParagraphBox';




export default function Form() {
 
const [flagImg, setFlagImg] = useState(false)
const [flagPar, setFlagPar] = useState(false)
const [paragArray, setParagArray] = useState([
    {titolo: '', contenuto: ''}
])

const handleChange = (e) => {
    
    console.log('e ', e)
    console.log('e.titolo PARENT ', e.titolo)
    console.log('e.contenuto PARENT ', e.contenuto)
    setParagArray({
        ...paragArray,
        [e.titolo]: e.contenuto
    })
}


useEffect(() => {
    console.log('rendering useEffect')
    console.log('flagPar: ', flagPar)
    console.log('flagImg: ', flagImg)
    console.log('paragArray ', paragArray)
}, [flagPar, flagImg, paragArray])

const handleSubmit = (evt) => {
    evt.preventDefault(); //usato per evitrare il refresh del browser
}

const addParag = (parag) => {
    console.log('paragArray PARENT  ', paragArray)
    
    
}

const onSelect = (selectedValue) => {
    console.log('valore selezionato nella picklist: ' + selectedValue)
    if(selectedValue === 'Layout 2') {
        setFlagImg(true)
        setFlagPar(true)
    }
}

return(
    <div>
    <Picklist onSelect={onSelect} label="Seleziona un layout di contratto: "  pickVals={["Seleziona...", "Layout 1", "Layout 2", "Layout 3"]}/>
    {flagImg ? (
        <form onSubmit={handleSubmit}>
            <Picklist onSelect={onSelect} label="Seleziona Immagine: " pickVals={["Seleziona...", "Immagine 1", "Immagine 2", "Immagine 3"]} />
        </form>
    ) : null}
    {flagPar ? (
        <div>
            <ParagraphBox labelInputBox="Paragfrafo 1" labelTextArea="Contenuto Paragrafo" onChange={handleChange}/>
            <div id = "add-paragraph">
                <button type="button" onClick={addParag}>+</button>
                <input type="submit" value="Submit" />
            </div>
        </div>            
    ) : null}        
    </div>
)

在此先感謝您的時間

Answer 1

我知道這很老了……但我剛剛遇到了同樣的問題，所以就這樣吧：JSX 只是常規 JavaScript 的語法糖。 因此，您可以手動創建組件並將其作為鈎子的一部分提供，即：

自定義鈎子：

 import React, { useState } from 'react'; import Advise from '../../components/Advise/Advise'; const useAdvise = () => { const [ showAdvise, setShowAdvise ] = useState(false) const [ adviseMsg, setAdviseMsg ] = useState('') const [ loading, setLoading ] = useState(false) const hideAdvise = () => { setShowAdvise(false) } const adviseComponent = React.createElement(Advise, {show:showAdvise, showSpinner:loading, hideAdvise:hideAdvise, children:adviseMsg}) return { adviseComponent, setShowAdvise, setAdviseMsg, setLoading } }; export default useAdvise;

我想要的組件：

 import useAdvise from '../hooks/useAdvise/useAdvise' const Page = () => { const {adviseComponent, setShowAdvise, setAdviseMsg, setLoading} = useAdvise() return( <div> {adviseComponent} </div> ) }

希望它有所幫助（也來自 Br 的歡呼聲）