将 state 传回给父母，并在 React 中将其他道具从父母传给孩子

Question

I know how to pass the state from child to parent. And I know how to pass props from parent to child.

However, the obvious way for doing both at the same time doesn't seem to work as I expected. Please see an example below.

import React, { useState } from "react";

const Child = (props, { other }) => {
  // This is what I'd like to achieve but it ignores the {other} prop and doesn't received it from parent

  // const Child = ({ other }) => { // Works, but the sending of props from child to parent stops working
  // const Child = (props) => { // Works too but obviously the 'other' prop is not passed anymore
  return (
    <>
      Child
      <button onClick={() => props.setValue("New stuff")}>Click!</button>
      <p>{other}</p>
    </>
  );
};

const Parent = () => {
  const [value, setValue] = useState("Default value");

  return (
    <>
      Parent <Child setValue={setValue} other={"Something else"} />
      <p>{value}</p>
    </>
  );
};

export default Parent;

I tried passing both as {props, other} , (props, other) , ({props, {other}}) but nothing worked.

Here is a link to Codesandbox.

Answer 1

Use const Child = ({other, ...props }) => {

CodeSandbox: https://codesandbox.io/s/romantic-gagarin-3cgto

Answer 2

The props parameter in this case actually contains both of the setValue and other props.

The destructuring syntax is also helpful for legibility here.

import React, { useState } from "react";

const Child = (props) => {
  // destructure both setValue and other out of props
  const {setValue, other} = props
  return (
    <>
      Child
      <button onClick={() => setValue("New stuff")}>Click!</button>
      <p>{other}</p>
    </>
  );
};

const Parent = () => {
  const [value, setValue] = useState("Default value");

  return (
    <>
      Parent <Child setValue={setValue} other={"Something else"} />
      <p>{value}</p>
    </>
  );
};

export default Parent;

Answer 3

You can access other from props :

import React, { useState } from "react";

const Child = (props) => {
  return (
    <>
      Child
      <button onClick={() => props.setValue("New stuff")}>Click!</button>
      <p>{props.other}</p>
    </>
  );
};

const Parent = () => {
  const [value, setValue] = useState("Default value");

  return (
    <>
      Parent <Child setValue={setValue} other={"Something else"} />
      <p>{value}</p>
    </>
  );
};

export default Parent;