無法訪問功能組件的函數內的道具

Question

我正在嘗試在功能道具的功能中使用道具。

const Inputs = (props) => {
    console.log(props.printFirstArray);
    const FirstInputSet = () => {
        console.log(props.printFirstArray)
   }
}

第一個console.log正在記錄printFirstArray的值，但是FirstInputSet()函數中的第二個console.log沒有記錄任何內容。 編輯：最少代碼

const Inputs = (props) => {
    const FirstInputSet = () => {
        return (
            <>
                <div className="first input-set">
                    {props.printFirstArray}
                </div>
            </>
        );
    }

    const renderFirstInputSet = () => {
        if (props.firstInputValue)
            return <FirstInputSet />
        else
            return null;
    }

return (
    <>
            {renderFirstInputSet()}
    </>
);
}

props.printFirstArray 和 props.printSecondArray 都沒有返回任何東西

Answer 1

從您的代碼來看， FirstInputSet是一個新組件，您沒有傳遞任何道具。

return <FirstInputSet />

嘗試將您的道具傳遞給子組件，但我建議將子組件放在父組件之外。

或者

如果您打算使用FirstInputSet作為函數，您可以修改如下代碼

return FirstInputSet();