reactjs 使用挂钩将道具从父级传递到子级

zxlwwiss 于 2022-11-22 发布在 React

关注(0)|答案(2)|浏览(197)

我是一个新的React，我正在尝试将属性从父函数传递到子函数。我传递的参数“square_state”和“setSquare_state”在useSquare或handle_square_click函数中无法识别。我使用下面的https://designcode.io/react-hooks-handbook-props作为引用。

const handle_square_click = (props) => {
    props.setSquare_state(player)
    setGetplayer(true)
  }

  const useSquare = (square_state, setSquare_state) => {
    // Hook for square state management and rendering
    return (
        <button className="square" onClick={<handle_square_click setSquare_state={setSquare_state}/> }>
          {square_state}
        </button>
    );
  }
  
  // ------------------------------------------------------------------
  // Board Function

  const Board = ({player}) => {
    let status = "Next Player : " + player
    const [square1_state, setSquare1_state] = useState(1);
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          <useSquare
            square_state={square1_state}
            setSquare_state={setSquare1_state}
          />

reactjs

来源：https://stackoverflow.com/questions/74513270/passing-props-from-parent-to-child-using-hooks

2条答案

按热度按时间

j2datikz1#

这里有许多问题。

以use为前缀的函数应该保留给 custom hooks。如果你有一个返回React组件的函数，你应该遵循React标准，给予它一个大写的名字，一个不以use开头的名字--例如，你可以调用square函数Square。
当你传递道具时

square_state={square1_state}
     setSquare_state={setSquare1_state}

然后孩子将它们视为一个对象的属性，其中对象是函数的第一个参数--就像你处理handle_square_click一样。

const useSquare = (square_state, setSquare_state) => {

应该是

const Square = ({ squareState, setSquareState }) => {

（使用非常常见的camelCasing约定）

handle_square_click是一个普通函数，而不是一个组件，因此onClick={<handle_square_click没有任何意义。在Square中声明该函数，并在传递onClick属性时仅引用该函数。在Square中声明该函数以避免必须四处传递内容。
click处理程序试图引用player，但它不在作用域中。您需要从父级向下传递它。（setGetplayer可能也需要向下传递，但它的声明没有显示在问题的代码中）

const Board = ({ player }) => {
    const [squareState, setSquareState] = useState(1);
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          <Square
            squareState={squareState}
            setSquareState={setSquareState}
            player={player}
          />

和

const Square = ({ squareState, setSquareState, player }) => {
  const handleSquareClick = () => {
    setSquareState(player);
    // setGetplayer(true);
  };
  return (
    <button className="square" onClick={handleSquareClick}>
      {squareState}
    </button>
  );
};

赞(0）回复(0）举报 2022-11-22

wwodge7n2#

<useSquare
        square_state={square1_state}
        setSquare_state={setSquare1_state}
   />

这不是在React或hook中使用子组件的方法！你应该以大写字母开头命名你的（自定义）组件，并在组件中调用hook。
因此，作为（在我键入此内容时出现的上一个答案），您应该重构代码。

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 使用挂钩将道具从父级传递到子级

2条答案

相关问题

热门标签

最新问答