创建一个 JSX 元素数组？从父级访问子组件状态

Question

我是 React 的新手，我正在尝试功能组件。这可能是一个多方面的问题，但这里是：

我有一个父组件和一个子组件。我用 useState 创建了一个数组，其中包含每个子组件初始化的值。

例子：

function ParentComponent() {

    const [optionInputArr, setOptionInputArr] = useState < IOptionInput[] > (initialOptions);
     

return (
<div>
   {
      optionInputArr.map((item) => {
        return <OptionInput optionInput = {
          item
        }
        key = {
          item.key
        }
        />
      })
    }

</div>
)

}

一切都呈现得很好，但我现在有一个用例，我需要访问 QuestionInput 组件中输入字段的值。

子组件：

function OptionInput(props: {optionInput: IOptionInput}){


    return (
        <>        
        <input></input>
        </>
    );

}

export default OptionInput;

我想到了一个想法，将整个组件保存在 ParentComponent 中作为一个数组，如下所示：

const[optionInputArr2, setOptionInputArr2] = useState<typeof OptionInput[]>([]);

我现在正尝试在 ParentComponent 中初始化一组这些组件，如下所示：

const initializeElems = ()=>{


     let props = {optionInput: {
            name: "",
            key: "",
            className: "",
            type: "",
            placeholder: ""
        }}


     let option1 = OptionInput(props);
        option1.key = props.optionInput.key; 


    setOptionInputArr2(option1);  // <-- results in Error

}

错误：

“元素”类型的参数不可分配给类型的参数 'SetStateAction<((props: { optionInput: IOptionInput; }) => 元素)[]>'.ts(2345)

我肯定做错了什么，但我不确定是什么。

我也试过这样创建组件：

    let elem = React.createElement("OptionInput",props); 
setOptionInputArr2(elem); // <---- results in an Error

这似乎也不起作用。

“ReactElement<{ optionInput: { name: string; key: string; className: string; type: string; placeholder: string; }; }, string | JSXElementConstructor>”类型的参数不可分配给参数 类型为“SetStateAction<((props: { optionInput: IOptionInput; }) =>” 元素）

我不知道是不是只有我一个人，但这些错误让我很困惑。我正在寻找的功能基本上是这样的：

1. 有一个可以访问每个子组件状态的父组件
2. 子组件包含自己的状态

我是不是想错了？

编辑 1：我想我应该使用 UseRef() 钩子来做到这一点，我还不确定，但我认为这样我可以访问子组件。

Answer 1

它来自界面，

Answer 2

你能展示整个组件代码吗？我确定缺少某些东西。

Answer 3

为什么要用State存储组件？

最好存储组件状态。假设您想从父元素创建多个输入字段

 const initialState= [
        {optionInput: {
            name: "",
            key: "",
            className: "",
            type: "",
            placeholder: ""
        }},
       {optionInput: {
            name: "",
            key: "",
            className: "",
            type: "",
            placeholder: ""
        }}] 

const [inputs, setInputs] = useState(initialState)

return <ChildComponent inputs={inputs} setInputs={setInputs}/>

子组件

const ChildComponent = ({inputs})=> inputs.map(inputProps=><OptionInput {...inputProps}/>)

现在你可以从父母那里操纵

inputs

状态