重用 ReactJS 组件答案

【问题标题】：Reuse ReactJS component重用 ReactJS 组件
【发布时间】：2021-11-20 16:00:31
【问题描述】：

我已经构建了一个用于渲染情绪的 ReactJS 组件。可以为每个表情构建单独的组件，但我想使用一个组件但根据需要传递单独的表情。

到目前为止，这是有效的：

emotion.js

import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useState } from 'react';

const Emoction = () => {    
    return (
        <FontAwesomeIcon icon={faHeart} />
    );
};

export default Emoction;

emoction_hb.js

import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useState } from 'react';

const EmoctionHb = () => {    
    return (    
        // <input type="text" />
        <FontAwesomeIcon icon={faHeartBroken} />
    );
};

export default EmoctionHb;

现在，我将这两个组件捆绑为：

expanded_content.js

import Emoction from "../emoctions/emoctions";
import EmoctionHb from "../emoctions/emoctions_hb";
import styled from "@emotion/styled";

import { faHeartBroken } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { Component } from 'react';

const Merged = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
`;

const expandedContent = () => {
    return(
      <div>
        <Merged>
            <Emoction/>
            <EmoctionHb/>
        </Merged>
      </div>
    )
    };
    
export default expandedContent;

当我使用 App.js

渲染时

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

import expandedContent from './components/merged_component/expanded_content'

class App extends React.Component {     
    render(){
        return(
            <Router>
            <>            
            <Route path='/ExpandedContent' exact component={expandedContent}/>
            </>
            </Router>
        )        
    }   
}
export default App;

给我。

我想要做的是，我不想创建一个名为 emoctions_hb.js 的组件，而是想通过传递“faHeartBroken”作为其中的值来重用 emoction.js。如果在没有任何值的情况下调用 emoction.js，我希望它使用“faHeartBroken”作为默认值。

尝试使用 https://webomnizz.com/change-parent-component-state-from-child-using-hooks-in-react/ 创建父子关系，但对我来说没有成功。

【问题讨论】：

情绪？我猜你的意思是 表情符号 ;)

标签： javascript reactjs components emoticons

【解决方案1】：

只需将图标作为道具传递，并将默认值设置为faHeartBroken：

const Emoction = ({ faIcon = faHeartBroken }) => {    
    return (
        <FontAwesomeIcon icon={faIcon} />
    );
};

【讨论】：

这似乎有助于设置默认值。当通过另一个组件调用时，如何以不同的情感重用它？
<Emoticon faIcon={faHeart} />
这样一个不错的解决方案。我看到 ReactJS 是如此的 Pythonic。 :)

【解决方案2】：

看起来您正在导入useState，但您没有在任何地方实现它。您可以尝试在您的扩展内容.js 文件中实现状态并将其传递给您的子组件 emoction.js，如下所示：

const ExpandedContent = () => {

    const [heart, setHeart] = useState(true)

    return(
      <div>
        <Emoction heart={heart} setHeart={setHeart}/>
      </div>
    )
    };
    
export default ExpandedContent;

请注意，您需要更改组件的名称。请参阅此处的文档https://reactjs.org/docs/hooks-rules.html。然后，在您的Emoction 组件内部，您将可以访问默认设置为 true 的heart，您还可以使用从ExpandedContent 向下传递的函数setHeart 实现一些逻辑来切换状态：

const Emoction = ({heart, setHeart}) => {
    
    const handleHearts = () => {
        setHeart(heart => !heart)
    }
    return (
       heart ?  <FontAwesomeIcon icon={faHeart} /> : <FontAwesomeIcon icon={faHeartBroken} />
    );
};

export default Emoction;

通过使用三元语句返回您的组件，您可以根据当前状态决定显示faHeart 或faHeartBroken。您需要做的就是在需要的地方添加功能。

【讨论】：