Javascript 在react中的子组件中设置值

在下面的场景中，我有一个非常简单的子组件（箭头组件），它的作用类似于计数器。计数器可以增加一个简单的值。如果家长想将计数器设置为x怎么办？显而易见的答案是，只需将参数设置为x。但由于父组件中的变量是一个钩子，因此它将是只读的。然后您是否必须为子对象上的getter和setter变量添加一个参数？然后孩子会处理这两个变量？或者这里的最佳实践是什么？或者有没有办法把整个钩子转移给孩子？在我的世界里，你必须给孩子添加两个参数，这真的很不漂亮

const App = props => {
  const resetChildCounter = () => {
    alert("what to do here");
  };

  return (
    <div className="App">
      <Child />
      <button onClick={resetChildCounter}>
        Reset child counter from parent
      </button>
      <button onClick={resetChildCounter}>Set child counter to 5</button>
    </div>
  );
};

const Child = props => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <span>Counter is: {counter}</span>
      <button
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        Increment
      </button>
    </div>
  );
};

const-App=props=>{
常量resetChildCounter=（）=>{
警惕（“在这里做什么”）；
};
返回(
从父计数器重置子计数器
将子计数器设置为5
);
};
const Child=props=>{
const[counter，setCounter]=useState（0）；
返回(
计数器为：{Counter}
{
设置计数器（计数器+1）；
}}
>
增量
);
};

你说得对

如果需要从父级设置，则需要将其存储为父级而不是子级的状态。如果你需要在孩子身上使用它，你需要把它传给孩子。最后，如果您也需要从子级设置它，则不直接进行设置，而是通过父级传递的setter道具进行设置

在我的世界里，你必须给孩子添加两个参数，这真的很不漂亮

const App = props => {
  const resetChildCounter = () => {
    alert("what to do here");
  };

  return (
    <div className="App">
      <Child />
      <button onClick={resetChildCounter}>
        Reset child counter from parent
      </button>
      <button onClick={resetChildCounter}>Set child counter to 5</button>
    </div>
  );
};

const Child = props => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <span>Counter is: {counter}</span>
      <button
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        Increment
      </button>
    </div>
  );
};

---

如果你在父母或孩子身上都有一个状态，然后如果你有可能从两个方面对它进行变异，那就更难看了。它将打破React的理念。

子组件的作用类似于“混合”组件，它的作用类似于一个

混合组件的简单实现如下所示：

const NOOP = () => {}

const Child = ({ initial = 0, onChange = NOOP }) => {
  const [counter, setCounter] = useState(initial);

  useEffect(() => {
    setCounter(initial);
  }, [initial]);

  useEffect(() => {
    onChange(counter);
  }, [onChange, counter]);

  return (
    <div>
      <span>Counter is: {counter}</span>
      <button onClick={() => setCounter(p => p + 1)}>Increment</button>
    </div>
  );
};

export default Child;

constnoop=（）=>{}
const Child=（{initial=0，onChange=NOOP}）=>{
常量[计数器，设置计数器]=使用状态（初始值）；
useffect（（）=>{
设置计数器（首字母）；
}，[首字母]；
useffect（（）=>{
onChange（计数器）；
}，[onChange，counter]）；
返回(
计数器为：{Counter}
setCounter（p=>p+1）}>Increment
);
};
导出默认子对象；

在这种情况下，如OP所述：

我想做一个自我维护的子组件，它的内容比一个简单的按钮多得多

---

您得到了一个具有受控功能的独立组件。

您可以将增量按钮移动到父组件，这样就不需要将setter传递给子组件。这只是一个示例来说明我的问题。我想做一个自我维护的子组件，它的内容比一个简单的按钮多得多。另外，我会有多个计数器，每个计数器都有自己的状态，我认为这样更好。但它有问题吗？据我所知，您的组件侦听参数的更改（如果我错了，请纠正我）。因此，当父对象将该参数更改为5时，子对象的计数器现在将为5。然后，子对象开始将该值增加到8。现在，父对象希望将该值设置回5。但是，您的活动不会被解雇，因为您再次将marameter设置为5，而孩子不会被触发？是的，这很有魅力。我更喜欢这种方法。更加独立！谢谢你的意见。谢谢。我同意丹尼斯的回答，因为它更独立。