时间戳

首页 > 解决方案 > 从父级访问反应组件的属性

javascript - 从父级访问反应组件的属性

问题描述

我想将一些数据与一个组件捆绑在一起。下面是一个具有名为 name 的属性的 SFC 示例。我不想将该属性name与名为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 放在同一个项目中是个好主意吗？我看这整件事错了吗？

谢谢

标签： javascriptreactjsreact-hooks

解决方案

在反应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 上下文。

推荐阅读