렌더링 중에 React `onClick` 기능이 트리거되는 이유와 이를 방지하는 방법은 무엇입니까?

React onClick 함수가 렌더링 시 트리거됨: 이를 방지하는 이유 및 방법

React 애플리케이션에서 사용자 정의 구성 요소를 만들 때 데이터와 함수를 전달하는 경우가 많습니다. 하위 구성 요소에. 객체 목록 및 삭제 기능을 처리할 때 onClick 기능이 클릭할 때가 아니라 렌더링 중에 실행되는 문제가 발생할 수 있습니다.

코드 예:

다음 코드를 고려해보세요.

const TaskList = React.createClass({
  render: function() {
    const tasks = this.props.todoTasks.map(todo => (
      <div>
        {todo.task}
        <button type="submit" onClick={this.props.removeTaskFunction(todo)}>
          Submit
        </button>
      </div>
    ));
    return (
      <div className="todo-task-list">{tasks}</div>
    );
  },
});

문제 설명:

단순히 함수를 onClick에 전달하는 대신 코드가 this.props.removeTaskFunction(todo)을 호출하기 때문에 문제가 발생합니다. 이러한 즉각적인 호출로 인해 렌더링 중에 함수가 실행됩니다.

해결책:

이 문제를 해결하려면 다음 코드에 표시된 대로 화살표 함수를 사용할 수 있습니다.

<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>

화살표 기능 React:

()로 표시되는 화살표 함수 => {}는 ES6에 도입된 간결한 구문입니다. React 개발에 여러 가지 이점을 제공합니다.

• 향상된 성능: 화살표 기능을 사용하면 컨텍스트 바인딩으로 인해 발생하는 의도하지 않은 재렌더링을 방지할 수 있습니다.
• 유연성: 화살표 함수는 콜백이나 이벤트로 고차 함수에 직접 전달될 수 있습니다.
• 가독성 향상: 화살표 함수는 명시적인 바인드() 문의 필요성을 제거하여 코드를 단순화합니다.

따라서 onClick 핸들러를 화살표 기능을 사용하면 버튼을 클릭할 때만 삭제 기능이 실행되도록 보장하여 렌더링 중에 의도하지 않은 실행을 방지할 수 있습니다.

위 내용은 렌더링 중에 React `onClick` 기능이 트리거되는 이유와 이를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!