Блог

Я создал компонент ReactJS для визуализации эмоций. Для каждой эмоции можно создать отдельный компонент, но я хочу использовать один компонент, но передавать отдельные эмоции по мере необходимости.

Это то, что работает до сих пор:

emoction.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 Я хочу повторно использовать emoction.js передав «faHeartBroken» в качестве значения в нем. Если emoction.js вызывается без какого-либо значения, я хочу, чтобы он использовал «faHeartBroken» в качестве значения по умолчанию.

Попробовал далее создать отношения между родителями и детьми с помощью https://webomnizz.com/change-parent-component-state-from-child-using-hooks-in-react/ но у меня ничего не вышло.

Просто передайте значок в качестве опоры и установите значение по умолчанию равным faHeartBroken :

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

Похоже, что вы импортируете useState , но нигде не внедряете его. Вы могли бы попробовать реализовать состояние в своем expanded_content.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 компонента у вас будет доступ, для heart которого по умолчанию установлено значение true, и вы также можете реализовать некоторую логику для переключения состояния с помощью функции setHeart , которая передается из ExpandedContent :

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

export default Emoction;
 

Используя троичную инструкцию для возврата компонента, вы можете выбрать отображение faHeart или faHeartBroken в зависимости от текущего состояния. Все, что вам нужно сделать, это добавить функциональность везде, где она вам нужна.