Question

所以我有一个看起来像这样的组件：

import React, { memo, useState } from "react";    
import styles from "./navigation.styles.scss";

const Navigation = ({ children }) => {

    const [toggle, toggleState] = useState(false);

    return (
        <>
            <div onClick={() => toggleState(!toggle)}>
                <p>Test</p>
            </div>
            {children}
            <style jsx>{styles}</style>
        </>
    );
};

export default memo(Navigation);

然后我有另一个看起来像这样的组件：

import React, { memo, useState } from "react";    
import styles from "./container.styles.scss";

const Container = ({ children }) => {

    const [toggle, toggleState] = useState(false);

    return (
        <>
            <div className={toggle ? "dark-bg" : "dark-bg active"}>
                {children}
            </div>
            <style jsx>{styles}</style>
        </>
    );
};

export default Container ;

现在，事情是第一个组成部分的{children}有时是第二个组成部分，有时不是。因此，我不能只是将CSS和HTML从第二个组件放到第一个组件中-这样反过来可以解决我的问题。

但是您可能会看到，第一个组件中有一个onClick事件。我希望这样，当单击该按钮时，单击的状态将发送到第二个组件并切换className-toggle。

是否可以通过执行此操作来实现？还是我必须对所有内容进行不同的设置？

是的，我对React很陌生，所以请不要苛刻。

Answer 1

Css

我将研究使用CSS进行样式设置的更好方法。不确定您的项目范围/工具，但通常所有css文件都导入dom根目录并加载到该目录中。这样可以避免为每个组件创建css文件。

这里9 ways实现CSS来进行反应。

传递HTML

在react中，如果要在另一个组件中呈现组件而不是将其作为子组件传递，则应按以下步骤导入它。

// replace container path with actual path of Container file
// ex './Container.js'

import Container from 'container_path.js';

现在，渲染组件就像将其包含在html代码中一样简单。

return (
        <>
            <div className={toggle ? "dark-bg" : "dark-bg active"}>
                <Container/>
            </div>
        </>
    );

这里有Stack Overflow post个用户使用react + es6 + webpack导入组件。在那里提供了有关导入组件的更多信息。

状态管理

在反应中，如果您有一个状态被多个组件访问，则标准是将该状态保留在父组件中。

这样，您可以将状态作为道具传递给任何子组件。您还可以创建一个函数来更新此状态，并将该函数作为道具传递给孩子。

例如：

import React, { useState } from "react"; 
import Container from "./Container.js";
import Navigation from "./Navigation.js"

const Parent = props => {
    const [toggle, toggleState] = useState(false);
   
    return (
        <div>
            <Container toggleState={toggleState} toggle={toggle} />
            <Navigation toggleState={toggleState} toggle={toggle} />
        </div>
    )

}

在继续进行项目之前，我建议您研究功能组件与类组件。这是一个有用的article。

Answer 2

尝试将第二个组件包装为以第一个组件的状态为参数的功能。

第二个组件的包装器，第一个组件的包装器

const putInnerComponent = (stateFromOuterComponent) => <Container toggle={stateFromOuterComponent}/>;

<Navigation children={putInnerComponent}/>

您的第一个组件

import React, { memo, useState } from "react";    
import styles from "./navigation.styles.scss";

const Navigation = ({ children }) => {

    const [toggle, toggleState] = useState(false);

    return (
        <>
            <div onClick={() => toggleState(!toggle)}>
                <p>Test</p>
            </div>
            {children(toggle)}
            <style jsx>{styles}</style>
        </>
    );
};

export default memo(Navigation);

您的第二部分

import React, { memo, useState } from "react";    
import styles from "./container.styles.scss";

const Container = ({ children, toggle }) => {

    //const [toggle, toggleState] = useState(false);

    return (
        <>
            <div className={toggle ? "dark-bg" : "dark-bg active"}>
                {children}
            </div>
            <style jsx>{styles}</style>
        </>
    );
};

export default Container;

将状态传递到{children} React钩子上

2 个答案:

Css

传递HTML

状态管理