從父級訪問反應組件的屬性

Question

我想將一些數據與一個組件捆綁在一起。 下面是一個 SFC 的示例，它有一個名為 name 的屬性。 我不想將屬性name與名為MyFormTab的組件MyFormTab 。 相反，我想從父組件訪問此屬性並將其分配為在父組件中顯示。

 const MyFormTab = (props) => { const name = props.name return ( <> <div className='flex-center-col'> <input type='email'></input> <input type='text'></input> </div> </> ) }

然后我想在父級中呈現此組件並將 name 屬性用於其他目的

 const ParentOfMyFormTab = () => { const [currentTab, setCurrentTab] = useState(1) const Tab1 = <MyFormTab name='Tab1' /> const Tab2 = <MyFormTab name='Tab2' /> return ( <form> <div id="tabTitles"> <h2 onClick={setCurrentTab(1)}>Tab1.name</h2> <h2 onClick={setCurrentTab(2)}>Tab2.name</h2> </div> {currentTab === 1 ? <Tab1 /> : <Tab2 />} </form> ) }

---

除了 SFC，我還可以使用我正在考慮的類。

 class MyFormTab { constructor(name){ this.name = name } render(){ return ( <> <div className='flex-center-col'> <input type='email'></input> <input type='email'></input> </div> </> ) } }

然而，我的項目主要使用鈎子。 我的團隊負責人（他不太了解 React）可能會對將類組件與鈎子混合使用猶豫不決。 我在其他帖子中讀到，在大多數情況下，鈎子基本上可以替換類組件。 我不知道鈎子如何更好，甚至在這種情況下使用。

---

你認為做我想做的事情的好方法是什么？ 將帶有鈎子和類組件的 SFC 放在同一個項目中是個好主意嗎？ 我看這整件事錯了嗎？

謝謝

Answer 1

在反應props中，僅從父級傳遞給子級。 因此，您可以擁有一個具有該名稱值的父級，並根據需要將其傳遞下去。 編輯了我的答案以回應您的編輯。

const MyFormTab = (props) => {
    const name = props.name        

    return (
        <>
            <div className='flex-center-col'>
                <input type='email'></input>
                <input type='text'></input>
            </div>
        </>
    )
}

const ParentOfMyFormTab = () => {
    const [currentTab, setCurrentTab] = useState(1)
    const Tab1 = <MyFormTab name=`Tab1` />
    const Tab2 = <MyFormTab name=`Tab2` />
    return (
        <form>
            <div id="tabTitles">
                <h2 onClick={setCurrentTab(1)}>Tab1</h2>
                <h2 onClick={setCurrentTab(2)}>Tab2</h2>
            </div>
            {currentTab === 1 ? <Tab1 /> : <Tab2 />}
        </form>
    )
}

關於混合基於類和函數組件的問題。 你不能在基於類的組件中使用鈎子，所以不要，也沒有必要。 我認為你應該更多地了解 React 的基礎知識。 如果你需要與其他組件共享數據，數據應該在父組件中，傳遞給子組件或在 React 上下文中。