Question

我有一个简单的反应功能组件，如下代码

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Test
        children={
          <React.Fragment>
            <label>Name: </label>
            <input type="text" onChange={(e) => setData(e)} /> 
          </React.Fragment>
        }
      />
    </div>
  );
}

export function Test({ children }) {
  const [data, setData] = useState("");
  return (
    <>
      <div>{children && children}</div>
      <div>{data}</div>
    </>
  );
}

我的问题是如何在触发 onChange 事件时更新 data 组件内的 Test 状态？这是sandbox

希望任何人都可以帮助我.. 提前致谢

Answer 1

你不必那样送孩子。 React 有一种特定的方式来处理孩子，这更容易做和维护。在你的情况下，你只需要抬起你的状态并将 state 和 callback 作为道具发送。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
 const [data, setData] = React.useState('')
  return (
    <div className="App">
      <Test data={data}>
         <> // shorthand for ReactFragment
            <label>Name: </label>
            <input type="text" onChange={(e) => setData(e.target.value)} value={data}/> 
         </>
      </Test>
    </div>
  );
}

export function Test({ data, children }) {
  return (
    <>
      <div>{children && children}</div>
      <div>{data}</div>
    </>
  );
}

Answer 2

您可以为此使用 render props 技术，如果您不喜欢重大重构，您可以保持您的模式完整。

工作演示 - https://codesandbox.io/s/flamboyant-monad-hw2lu?file=/src/App.js

import React, { useState } from "react";
import "./styles.css";

export function Child(props) {
  const { setData } = props;
  return (
    <React.Fragment>
      <label>Name: </label>
      <input type="text" onChange={(e) => setData(e.target.value)} />
    </React.Fragment>
  );
}

export default function App() {
  return (
    <div className="App">
      <Test
        render={(props) => {
          const { setData } = props;
          return <Child setData={setData} />;
        }}
      ></Test>
    </div>
  );
}

export function Test(props) {
  const [data, setData] = useState("");
  const { render } = props;
  return (
    <>
      <div>{render({ setData })}</div>
      <div>{data}</div>
    </>
  );
}

从反应功能组件中的道具更改设置状态？

2 个答案: