Question

我正在尝试创建一个系统，其中我的 App 组件的状态存储另一个组件，它将呈现。任何组件都应该能够更新此状态，从而强制 App 组件重新渲染。

function Page1() {
    return <p>Hello world!</p>
}

export default function App() {

    let [Page, setPage] = useState(Page1);

    return (
        <div id="app">
            <Page/>
        </div>
    );
}

我知道如何让任何组件都可以访问该状态，但是我在将组件呈现为 App 的状态时遇到了一些问题。当我尝试运行上面的代码时，出现以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

奇怪的是，将状态设为 JSON 对象似乎可以解决问题：

let [Page, setPage] = useState({Page: Page1});

    return (
        <div id="app">
            <Page.Page/>
        </div>
    );

但我想知道是否有办法在没有 JSON 的情况下做到这一点。它似乎适用于数字和字符串；组件有什么不同？

Answer 1

实际上，您不应该在状态变量中放置任何反应组件。关于这一点，您可以查看此 site 或此类似的 question 以阅读更多详细信息。

现在，为了完成这项工作，您只需使用一个对象来映射您需要的组件：

function Page1() {
    return <p>Hello world!</p>
}

function Page2() {
    return <p>Hello world!</p>
}

const components = {
 'page1': Page1,
 'page2': Page2,
}

export default function App() {

    let [page, setPage] = useState('page1');

    return (
        <div id="app">
            <components.page />
        </div>
    );
}

这样，您只需更改状态中的对象键字符串，它就会重新加载您打印的组件。

将组件传递给 useState() 钩子

1 个答案: