React新手求助：组件向子组件传递数值与运算符失败

你的代码里有几个关键问题导致props传递失败：

1. 未向子组件传递任何props：当前<SubComponent />标签没有传入任何数据，子组件自然无法获取到输入值和运算符信息。
2. 输入框取值方式不规范：直接通过first.value获取DOM值依赖全局变量，不符合React的数据流逻辑，容易引发错误。
3. 初始state无默认值：渲染<Inputs />时没有传递num1、num2、opp这些props，导致初始state为undefined。

<script type="text/babel">
    const main = ReactDOM.createRoot(document.getElementById('root'));
    
    function Inputs(props) {
        // 给初始state设置默认值，避免显示undefined
        const[val1, setVal1] = React.useState(props.num1 || '');
        const[val2, setVal2] = React.useState(props.num2 || '');
        const symbols = ['+', '-', 'x', '÷'];
        const[sym, setSym] = React.useState(props.opp || '+');
        
        // 使用useRef获取输入框DOM元素
        const firstRef = React.useRef(null);
        const secondRef = React.useRef(null);
        
        const getVal = () => {
            // 通过ref安全获取输入框值
            setVal1(firstRef.current.value);
            setVal2(secondRef.current.value);
        }
        
        const getSym = (num) => {
            setSym(symbols[num])
        }
        
        return(
            <div>
                {/* 绑定ref到输入框 */}
                <input id='first' ref={firstRef}></input>
                <input id='second' ref={secondRef}></input>
                <p>输入值1：{val1}</p>
                <p>输入值2：{val2}</p>
                <p>运算符：{sym}</p>
                <button id='get' onClick={getVal}>获取输入值</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>
                {/* 向子组件传递需要的props */}
                <SubComponent num1={val1} num2={val2} operator={sym} />
            </div>
        )
    }
    
    class SubComponent extends React.Component {
        render() {
            // 从props中解构数据并展示
            const { num1, num2, operator } = this.props;
            return(
                <div>
                    <p>子组件展示：{num1} {operator} {num2}</p>
                </div>
            )
        }
    }
    
    main.render(<Inputs />);
</script>

• 传递props给子组件：在<SubComponent />中添加num1={val1}、num2={val2}、operator={sym}，将父组件的状态数据传递给子组件。
• 使用useRef获取输入值：通过useRef绑定输入框，避免直接依赖全局DOM变量，更符合React的组件逻辑。
• 添加state默认值：给useState的初始值加上兜底内容，避免页面显示undefined。
• 子组件解构props：在子组件中通过this.props获取传递的数据，解构后更清晰地展示内容。

内容的提问来源于stack exchange，提问作者Adam