时间戳

首页 > 解决方案 > 将钩子或函数传递给子组件

reactjs - 将钩子或函数传递给子组件

问题描述

使用 Hooks 在 React 中更改状态的首选方法是什么？

选项1：我认为这是更“传统”的

function App() {
  const [input, setInput] = useState('');

  const onInputChange = (event) => {
    setInput(event.target.value)
  };

  return (
    <div className='App'>
      <Form onInputChange={onInputChange} />
    </div>
  );
}

const Form = ({ onInputChange }) => {
  return (
    <div>

      <div>
        <div>
          <input
            type='text'
            onChange={onInputChange}
          />
          <button'>
            Submit
          </button>
        </div>
      </div>
    </div>
  );
};

export default Form;

选项2：但我见过人们这样做

function App() {
  const [input, setInput] = useState('');

  return (
    <div className='App'>
      <Form onInputChange={setInput} />
    </div>
  );
}

export default App;

const Form = ({ onInputChange }) => {
  return (
    <div>
      <div>
        <div>
          <input
            type='text'
            onChange={(e) => {
              onInputChange(e.target.value);
            }}
          />
          <button>
            Submit
          </button>
        </div>
      </div>
    </div>
  );
};

export default Form;

在 App 组件的选项 1 中，更改其状态的逻辑就在那里。在选项 2 中，更改 App 组件的逻辑是在子组件中，对吧？

如果我理解正确，我认为选项 1 更有意义。你怎么看？

标签： reactjs

解决方案

选项 1 更好，因为我们只需将道具或数据传递给子组件而不是逻辑，逻辑必须驻留在父组件中。

推荐阅读