使用反应挂钩从父组件更新子组件的 state

Question

这是我的 RespMessages 组件的样子：

import React, { useState } from "react";
import { Message } from "semantic-ui-react";


function RespMessages() {
  const [message, setMessage] = useState("This is a success message");

  return (
    <Message positive>
      <Message.Header>{message}</Message.Header>
    </Message>
  );
}

export default RespMessages;

这就是我在不同组件中使用 RespMessages 组件的方式。

function CreateChannel() {
return (
    <Container>
      <RespMessages />
    </Container>

}

这工作正常，我可以看到This is a success message 。

我无法弄清楚的是如何从CreateChannel组件调用RespMessages组件的setMessage 。

你能帮忙吗？

PS：我是反应新手，所以反应的行话可能已经关闭。

Answer 1

您可以使用useImperativeHandle来做到这一点。 这是一个例子。

let RespMessages = forwardRef((props, ref) => {
  const [message, setMessage] = useState("This is a success message");
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    setMessage: (msg) => setMessage(msg)
  }));

  return <div>{message}</div>;
});

function App() {
  // In order to gain access to the child component instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();

  return (
    <div>
      <RespMessages ref={childRef} />
      <button onClick={() => childRef.current.setMessage('hey')}>Click</button>
    </div>
  );
}

---

如文档中所述，这种方法应该很少使用。 还要考虑其他答案中的方法。

Answer 2

你没有。 母公司一般不应该知道孩子的执行情况。

您可以将消息 state 移动到父级，并将消息作为道具传递给子级。 这会将您的 RespMessage 组件从不受控制的组件更改为受控组件。

Answer 3

如果您想根据Parent组件更改Child组件中的某些内容，则必须将 state 提升到父组件。 如果您想区分什么应该是 state 和什么应该是道具以及 state 应该驻留在哪里，那么很容易弄清楚。

State：将 state（ message ）保留在数据将更改的组件中。 在本例中为CreateChannel组件。

道具：依赖于 state（ message ）的组件应该将 state 作为道具。 在这种情况下RespMessages组件。

setState 方法：现在，如果孩子还希望能够设置 state ( message )，那么您也可以将setMessage作为道具从CreateChannel传递给 RespMessages`。

反应文档对所有这些东西都有很好的解释。 如果需要，请查看。

响应消息.jsx

import React from "react";
import { Message } from "semantic-ui-react";


function RespMessages({message}) {
  return (
    <Message positive>
      <Message.Header>{message}</Message.Header>
    </Message>
  );
}

export default RespMessages;

创建频道.jsx

import React, { useState } from "react"
import { Container } from "semantic-ui-react"

function CreateChannel() {
    const [message, setMessage] = useState("")
    return (
        <Container>
            <RespMessages message={message} />
        </Container>
    )
}

export default CreateChannel