Блог

У меня есть общий компонент React, который выглядит следующим образом:

 import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  ...
`;

export default function InvisibleActionButton(props) {
  return (
    <StyledButton onClick={() => props.clickHandler()}>{props.buttonLabel}</StyledButton>
  )
};
  

Я хочу иметь возможность использовать эту кнопку в случаях, когда есть clickHandler, и в случаях без него. Например:

 const registerClick = () => {
  props.history.push("/register");
};

return (
  <InvisibleActionButton clickHandler={registerClick} buttonLabel={"No account? Register here!"} />
)
  

и:

 return (
  <StyledForm onSubmit={registerClick}>
    <InvisibleActionButton type="submit" buttonLabel={"Register"} />
  </StyledWrapperDiv>
)
  

Первый экземпляр работает нормально, но во втором экземпляре я получаю props.clickHandler is not a function , так как я не отправляю никакой реквизит clickHander. Как я могу обобщить свой общий компонент, чтобы использовать clickHander, когда он предоставлен, и игнорировать его, когда нет?

Лучший способ, который вы могли бы сделать, это (вам не нужно вручную устанавливать везде, где его общий компонент должен обрабатывать эту логику):

     const {clickHandler} = props;
    <StyledButton onClick={clickHandler?clickHandler:null}>{props.buttonLabel}</StyledButton>

  

Вот codesandox этого poc:https://codesandbox.io/s/brave-sun-62xx3?file=/src/App.js:0-311

 import React from "react";
import "./styles.css";

export default function App() {
  let test = () => console.log("hello");
  test = null;
  return (
    <div className="App" onClick={test ? test : null}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}


  

Я бы сделал одно из этих

 // spread and assign default value as null
export default function InvisibleActionButton({clickHandler = null, ...props}) {
  return (
    <StyledButton onClick={clickHandler}>{props.buttonLabel}</StyledButton>
  )
};
  

или

 // check if handler is function(this is needed to avoid any other truthy values) else assign null
export default function InvisibleActionButton(props) {
  return (
    <StyledButton onClick={typeof props.clickHandler === 'function' ? () => props.clickHandler() : null }>{props.buttonLabel}</StyledButton>
  )
};
  

Нет необходимости изменять общий компонент; onClick функция может быть установлена в null, как так:

 return (
  <StyledForm onSubmit={registerClick}>
    <InvisibleActionButton type="submit" clickHandler={() => null} buttonLabel={"Register"} />
  </StyledWrapperDiv>
)