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。

我不知道如何从setMessage组件中调用RespMessages组件的CreateChannel。

可以帮忙吗？

P.S .：我是新手，所以React的行话可能没了。

Answer 1

您可以使用useImperativeHandle进行操作。这是example。

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

你不知道。母公司通常不应该了解孩子的身分。

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

Answer 3

如果要根据Child组件更改Parent组件中的内容，则必须将状态提升到父组件。如果要区分应该是什么状态和应该是什么道具以及状态应该在什么地方，那么就很容易弄清楚。

状态：将状态（message）保留在数据将更改的组件中。在这种情况下，CreateChannel组件。

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

setState方法：现在，如果孩子也希望能够设置状态（message），那么您还可以将setMessage作为{ {1}}到RespMessages`。

react docs对所有这些东西都有很好的解释。请根据需要进行检查。

RespMessages.jsx

CreateChannel

CreateChannel.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;

使用react钩子从父组件更新子组件的状态

3 个答案: