Question

在两个React组件中共享状态时遇到错误。因此，目前我遇到的问题是无法重组“未定义”的属性“输入”，因为它是未定义的。因此我认为输入状态不会从RenderContent组件中共享。我已经尝试过useContext，但是我确定如何构造它。

RenderContent.js

export const RenderContent = () => { 
  const [input, setInput] = useState(''); 
  return ( 
    <form>
     <input
      type="text"
      onChange={e => setInput(e.target.value)}
      value={input}
      onBlur={() =>delay(() =>setInput(''),150}
      placeholder='placeholder here...'
     />
    </form>
  );
};

RenderAction.js

export const RenderContent =  (input) => {  
  return ( 
    //...some code goes here
  );
};

因此可以看到RenderContent组件中的输入状态存储在此函数组件中，但是我想做一个状态提升，以某种方式将状态转移到父组件中，因为它们共享同一父对象，这样我就可以将输入状态传递到renderAction组件中。但我不确定该如何操作。

我已将父级组件作为参考。

<Dialog
 renderContent={RenderContent}
 renderAction={RenderAction}
/>

Answer 1


const MyComponent = () => {
  const [input, setInput] = useState('');

  return <Dialog
    renderContent={<RenderContent input={input} setInput={setInput} />}
    renderAction={<RenderAction input={input} setInput={setInput} />}
  />
}

export const RenderContent =  (props) => {  
const {input, setInput} = props;
  return ( 
    //...some code goes here
  );
};

React功能组件共享状态

1 个答案: