如何将属性从反应组件传递给其父级？答案

【问题标题】：How to pass a property from a react component to its parent?如何将属性从反应组件传递给其父级？
【发布时间】：2021-09-02 09:25:35
【问题描述】：

我正在创建一个包含多个部分的“演示”组件，每个部分都是动态呈现的。

在包含所有不同子项的父组件中，我希望禁用每个部分的“下一步按钮”，直到满足特定条件。按钮位于父组件中。

这个组件没有传递属性：

儿童一例：

export function ChildOne() {
const [condition, setCondition] = useState(false);
    return (
      <div>
        <button onClick={() => setCondition(true)}>
          hello world
        </button>
      </div>
    );
}

家长：

import ChildOne, condition from "../child-one"

export default function Parent() {
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}

我不确定如何从子组件传递条件属性，以便我可以在父组件中使用它。此外，这种方法是一种反模式吗？我可以通过其他方式根据子组件中的值有条件地禁用父级中的按钮吗？

谢谢。

【问题讨论】：

reactjs.org/tutorial/tutorial.html#lifting-state-up
您可以将函数作为道具传递给子组件，以更新父组件中的状态。基本上，您需要将状态放在父级内部。

标签： javascript reactjs react-native react-hooks

【解决方案1】：

试试这个方法

孩子：

export function ChildOne({setCondition}) {
    return (
      <div>
        <button onClick={() => setCondition(true)}>
          hello world
        </button>
      </div>
    );
}

家长：

import {ChildOne} from "../child-one"

export default function Parent() {
const [condition, setCondition] = useState(false);
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne setCondition={setCondition} />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}

【讨论】：

导入在父级中是如何工作的？收到此错误“语法错误：意外的令牌，导入行中的预期为“{””
抱歉，导入语句已损坏。我认为现在是正确的。未测试

【解决方案2】：

您应该在父组件中使用状态来控制步骤的禁用。它可以在您有其他页面时使用。

export default function Parent() {
  const [condition, setCondition] = useState({});
  const changeCondition = (val) => {
    setCondition({...condition, [page]: val})
  }
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne changeCondition={} />
      )}
   </div>
   <button isDisabled={!condition[page]}>Next</button>
 );
}

  export function ChildOne({changeCondition}) {
      return (
        <div>
          <button onClick={() => {changeCondition(true)}}>
            hello world
          </button>
        </div>
      );
  }

【讨论】：

在“changeCondition={}”行出现此错误：JSX 属性只能分配一个非空的“表达式”.ts(17000)
父函数中的

【解决方案3】：

您可以将 onClick 函数作为 props 参数传递。

孩子

export function ChildOne({onClick}) {
    return (
      <div>
        <button onClick={onClick}>
          hello world
        </button>
      </div>
    );
}

父母

import ChildOne, condition from "../child-one"

export default function Parent() {
const [condition, setCondition] = useState(false);
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne onClick={() => setCondition(true)} />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}

【讨论】：

ChildOne 在这种情况下应该有一个 onClick 属性：<ChildOne onClick ="..." />
您可能需要刷新，我在发布后立即修复了该问题。

【解决方案4】：

在你的父组件中试试这个：

import ChildOne, condition from "../child-one"    
export default function Parent() {
    const [condition, setCondition] = useState(false);
    const handleClick = () => setCondition(true)
    return(
       <div className="childRenderer">
          {page == 1 && (
            <ChildOne handleClick={handleClick} />
          )}
       </div>
       <button isDisabled={condition}>Next</button>
     );
    }

和正在使用的孩子：

export function ChildOne({handleClick}) {
    return (
      <div>
        <button onClick={handleClick}>
          hello world
        </button>
      </div>
    );
}

【讨论】：