将道具传递给道具。

发布于 2025-01-29 20:49:31 字数 469 浏览 3 评论 0原文

const Component1 = (props) => {
    const [myState, setMyState] = useState('hello world');
    const ChildComponent = props.children.type;
        return (
        <div>
              <ChildComponent data={myState} />
        </div>
            )
    }
    export default Component1;

我想要从component1到props.children的通过道具，我想问我的方法是正确的吗？ ; component1 /＆gt; < /code>我不想从应用程序组件中通过props我希望从component1传递给props.children。

原文

const Component1 = (props) => {
    const [myState, setMyState] = useState('hello world');
    const ChildComponent = props.children.type;
        return (
        <div>
              <ChildComponent data={myState} />
        </div>
            )
    }
    export default Component1;

i want pass props from Component1 to props.children, i want to ask my this approach is right ?, i am reusing Component1 in my code and passing components to Component1 like this <Component1><Component2 /><Component1 /> i want not pass props from App component i want pass props from Component1 to props.children.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半寸时光 2025-02-05 20:49:31

这是一种非常复杂的方法。根据经验，您应该在单独的文件中具有单独的组件。

我不清楚您要编码的内容，但根据我的推论，这就是我的处理方式。

我将拥有单独的＆lt; childComponent /＆gt; < /code>和＆lt; component1 /＆gt; < /code>。

在＆lt; component1/＆gt;中，我将渲染＆lt; childcomponent/＆gt;

import ChildComponent from "components/ChildComponent";

const Component1 = (props) => {
const [myState, setMyState] = useState('hello world');
    return <ChildComponent data={myState} />
}
export default Component1;

您可以清楚地看到component1 是一个冗余组件。

但是，如果＆lt; component1/＆gt;用作事件

    import ChildComponent from "components/ChildComponent";
    import Component1 from "components/Component1";
    
    const Wrapper = (props) => {
    const [myState, setMyState] = useState('hello world');
        return <Component1>
<ChildComponent data={myState} />
</Component1>
    }
        export default Wrapper;

That's a pretty convoluted approach. As a rule of thumb, you should have separate components in separate files.

I am not clear about what you are trying to code, but from what I deduced, here's how I'd approach it.

I will have separate <ChildComponent /> and <Component1 />.

Inside the <Component1 />, I will render the <ChildComponent />

import ChildComponent from "components/ChildComponent";

const Component1 = (props) => {
const [myState, setMyState] = useState('hello world');
    return <ChildComponent data={myState} />
}
export default Component1;

You can see clearly that Component1 is a redundant component.

However, if <Component1/> acts as a HOC, you can wrap the ChildComponent inside of it as

    import ChildComponent from "components/ChildComponent";
    import Component1 from "components/Component1";
    
    const Wrapper = (props) => {
    const [myState, setMyState] = useState('hello world');
        return <Component1>
<ChildComponent data={myState} />
</Component1>
    }
        export default Wrapper;

回复收藏 0 原文

~没有更多了~