Question

我有以下反应组件：

NavBar

{{1}}组件期望渲染子组件将根据Ant设计component表示网站内容。我的问题是如何在不重新渲染导航栏的情况下在导航栏组件中渲染我的子组件？我在导航栏中有一个{this.props.children}，但我不知道在不强制导航栏再次渲染的情况下注入道具的位置。

Answer 1

否。如果要在A内渲染组件B，并发送A作为B的道具，则，B的道具每次更改都会重新渲染。

如果要避免这种情况，则不应发送A作为道具，而应将其呈现在B中的包装器组件内。

例如：

// Your NavBar
function NavBar() {
    // This component is not going to be re-rendered, due to is
    // not receiving the children components as props.
    // The childrens are going to be in <Wrapper>
    return (
        <div className="NavBar">
            Hello!<br>

            <Wrapper />
        </div>
    );
}

// Here you have to have a condition to show
// component `ChildA` or `ChildB`.
// You can do that switching with some Redux or Duix value
function Wrapper() {
    return (
        <div className="Wrapper">
            {
                somethingHappened ? <ChildA /> : <ChildB />;
            }
        </div>
    );
}

function ChildA() {
    return(...);
}

function ChildB() {
    return(...);
}

检查包装器组件应该监听Redux（https://www.npmjs.com/package/react-redux）或Duix（https://www.npmjs.com/package/duix）值以在ChildA或ChildB之间切换

如何在静态组件中呈现子组件？

1 个答案: