如何将状态提升到父组件中？答案

【问题标题】：How to hoist state into parent component?如何将状态提升到父组件中？
【发布时间】：2020-10-18 20:24:31
【问题描述】：

我有演示和容器组件。表示组件使用本地状态。我想将本地状态删除到父组件。这是必要的，因此表示组件没有逻辑。请帮帮我

Page1.jsx：

import React, { useState } from 'react';

function Page1(props) {
  let textareaRef = React.createRef();
  
  const [state, setState] = useState({
    presentText: '',
  });

  function textareaSet() {
    props.setAppTextCreator(textareaRef.current.value);
    textareaRef.current.value = '';
  }

  function textareaChange() {
    setState({...state, presentText: textareaRef.current.value})
  }

  return (
    <div>
        <textarea 
          ref={ textareaRef }
          onChange={ textareaChange }>
        </textarea>
        <button onClick={ textareaSet }>send</button>
        <div>present: { state.presentText }</div>
        <div>memorized: { props.text }</div>
    </div>
  );
}

export default Page1;

Page1smart.jsx：

import {connect} from "react-redux";
import { setAppTextCreator } from '../../redux/appReducer';

import Page1 from './Page1';

const mapStateToProps = state => {
  return {
    text: state.appReducer.appText,
    presentText: state.presentText
  }
}

export default connect(mapStateToProps, { setAppTextCreator })(Page1);

【问题讨论】：

这里哪个是Presentation组件，哪个是父组件？
你知道lifting state up吗？
...顺便说一句，您需要的与吊装无关
@Yevgen Gorbunkov，您的示例未使用函数连接。在我的示例中，容器组件不包含类
由于您没有共享任何“父”组件，并且您似乎正在通过 redux connect HOC 传递状态和更新函数，因此“提升状态”不是正确的模式。假设您只想消除Page1 中的本地组件状态，则在下面提供了一个解决方案。仅供参考，“演示”容器可以拥有自己的本地状态，如果状态仅与那个组件相关，那么它是安装的，那很好。

标签： javascript reactjs react-redux

【解决方案1】：

如果我正确理解您的问题/问题，您只是想从 Page1 中删除本地组件状态并从 redux 中传递状态。

删除 textarea onChange 处理程序，稍后您将访问当前值。
渲染从道具传递的presentText。
使用useRef react 钩子并声明textareaRef const，因为它不会在渲染期间重新分配。

第1页

import React, { useRef, useState } from 'react';

function Page1({ presentText, setAppTextCreator, text }) {
  const textareaRef = useRef();
  
  function textareaSet() {
    setAppTextCreator(textareaRef.current.value);
    textareaRef.current.value = '';
  }

  return (
    <div>
        <textarea ref={textareaRef} />
        <button onClick={textareaSet}>send</button>
        <div>present: {presentText}</div>
        <div>memorized: {text}</div>
    </div>
  );
}

【讨论】：