使用 useState 将信息从类组件共享到功能组件答案

【问题标题】：Share info from class component in to function component with useState使用 useState 将信息从类组件共享到功能组件
【发布时间】：2022-08-13 20:51:15
【问题描述】：

//parent
const [mailArray, setMailArray] = useState([]);

 return (
          <StyledInputBox>
            <Chips setMailArray={setMailArray} />  //does not work
          </StyledInputBox>
          )
          
//children <<Chips>>
export default class Chips extends React.Component {
  state = {
    items: [\'\'],
    value: \'\',
    error: null,
  };
}

类组件 <> 是函数组件的子组件。我想通过 props 和 useState 从孩子的状态获取信息到父母。

为什么要为子组件使用类组件？你对这个问题的意思是什么，你能解释更多吗？
如何将 >>setMailArray<< 作为道具传递以及如何在类组件中提供信息
您不能将 useState 作为道具传递给组件，您可以使用道具传递函数或变量！

标签： reactjs typescript class use-state

【解决方案1】：

您应该更改父组件中的 mailArray 并将其传递给您的子组件。或者，如果您想更改子组件中的 mailArray，您应该将一个函数传递给您的 Chips 组件，该函数提供一个参数，当您单击 Chips 组件中的一个元素时会触发该参数，如下所示：

const changeMail = (value) => {
setMailArray(value)
}
 return (
          <StyledInputBox>
            <Chips onChange={changeMail} />  //does not work
          </StyledInputBox>
          )

并且在您的 Chips 组件中应该是例如下面的一些代码：

render() {
return (<div onClick={this.props.onChange('some value')}>chips component</div>)
}

【讨论】：