У меня проблемы с передачей данных React из компонента в подкомпонент

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

<script type = "text/babel">
        const main = ReactDOM.createRoot(document.getElementById('root'));
            function Inputs(props) {
            const[val1, setVal1] = React.useState(props.num1);
            const[val2, setVal2] = React.useState(props.num2);
            let symbols = ['+', '-', 'x', '÷'];
            const[sym, setSym] = React.useState(props.opp);
            const getVal = () => {
                setVal1(first.value);
                setVal2(second.value);
            }
            const getSym = (num) => {
                setSym(symbols[num])
            }
            return(
                <div>
                    <input id= 'first'></input>
                    <input id= 'second'></input>
                    <p>{val1}</p>
                    <p>{val2}</p>
                    <p>{sym}</p>
                    <button id= 'get' onClick  = {getVal}>get</button>
                    <button id= 'add' onClick  = {() => getSym(0)}>+</button>
                    <button id= 'subtract' onClick  = {() => getSym(1)}>-</button>
                    <button id= 'multiply' onClick  = {() => getSym(2)}>x</button>
                    <button id= 'divide' onClick  = {() => getSym(3)}>÷</button>
                    <SubComponent />
                
            </div>
           )
        }
        
        class SubComponent extends React.Component {
            render() {
                return(
                    <p>SubComponent{this.props.value}</p>
                )
            }
        }
        main.render(<Inputs />);

Я пробовал использовать реквизит и еще кое-что, но без кубиков.

Вы не передаете никаких реквизитов в свой компонент <Inputs />.

— 02.06.2024 07:48

Почему вы смешиваете в своем коде функциональные компоненты и компоненты классов? В идеале вам следует придерживаться того или иного варианта.

— 02.06.2024 14:47

javascript reactjs components

02.06.2024 05:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я вижу, что вы не передаете никаких реквизитов при вызове «SubComponent», но пытаетесь получить доступ, например:

class SubComponent extends React.Component {
            render() {
                return(
                    <p>SubComponent{this.props.value}</p>
                )
            }
        }

Вместо этого вам следует передать реквизиты вашему «SubComponent», например <SubComponent value = {{val1, val2, sym}} />, а затем попытаться получить к ним доступ, например

class SubComponent extends React.Component {
    render() {
        const { val1, val2, sym } = this.props.value;
        return (
            <div>
                <p>Value 1: {val1}</p>
                <p>Value 2: {val2}</p>
                <p>Symbol: {sym}</p>
            </div>
        );
    }
}

02.06.2024 06:59

Ответ принят как подходящий

Конечно, вот более короткий и лаконичный ответ:

Чтобы передать данные из вашего компонента Inputs в SubComponent, вам необходимо правильно передать реквизиты. Обновите свой код следующим образом:

function Inputs() {
    const [val1, setVal1] = React.useState('');
    const [val2, setVal2] = React.useState('');
    const [sym, setSym] = React.useState('');

    const getVal = () => {
        setVal1(document.getElementById('first').value);
        setVal2(document.getElementById('second').value);
    }

    const getSym = (num) => {
        setSym(['+', '-', 'x', '÷'][num]);
    }

    return (
        <div>
            <input id='first' />
            <input id='second' />
            <button onClick = {getVal}>Get</button>
            <button onClick = {() => getSym(0)}>+</button>
            <button onClick = {() => getSym(1)}>-</button>
            <button onClick = {() => getSym(2)}>x</button>
            <button onClick = {() => getSym(3)}>÷</button>
            <SubComponent val1 = {val1} val2 = {val2} sym = {sym} />
        </div>
    )
}

class SubComponent extends React.Component {
    render() {
        const { val1, val2, sym } = this.props;
        return (
            <div>
                <p>Value 1: {val1}</p>
                <p>Value 2: {val2}</p>
                <p>Operator: {sym}</p>
            </div>
        )
    }
}

const main = ReactDOM.createRoot(document.getElementById('root'));
main.render(<Inputs />);

Это должно решить проблему с передачей данных в ваш подкомпонент.

02.06.2024 07:43