javascript - React中如何从父组件获取函数

Question

我有几个功能组件:

export default function IconModal({
    label,
    icon,
    className,
    children
}) {
    const el = useRef();
    const [ isExpanded, setExpanded ] = useState(false);
    const onClickOutside = useCallback(() => setExpanded(false), []);
    const cx = classNames('modal__wrapper', className);

    useOnClickOutside(el, onClickOutside);

    return (
        <div className={cx} aria-expanded={isExpanded} ref={el}>
            <button onClick={() => setExpanded(!isExpanded)}
                    aria-label={label}
                    className="modal__action">
                <Icon name={icon} />
            </button>

            <span className="modal">
                <button className="modal__close" onClick={() => setExpanded(false)}>
                    <Icon name="close"/>
                </button>
                {children}
            </span>
        </div>
    );
}

然后我打算像这样使用它:

export default function InfoIconModal() {
    const context = useContext(SomeContext);
    const title = 'Hey Here';

    return (
        <IconModal
            className="header__modal__wrapper--info"
            label="Know more about this"
            icon="info"
        >
            <h2 className="info__subtitle text--uppercase">How This Works</h2>
            <h3 className="info__title">{title} = {context.name}</h3>
            <div className="info__body" dangerouslySetInnerHTML={{__html: context.hiw}} />
            <p className="font--semi-bold">
                <a href="#" target="_blank">View Legend</a>
            </p>
        </IconModal>
    );
}

效果很好。现在的事实是，如果在本例中用户单击“查看图例”链接，我想关闭模式，但这可能是任何其他原因。

我怎样才能实现这个目标？

Answer 1

我认为这是 render prop 模式的一个很好的用例，如下所示:

export default function InfoIconModal() {
  const context = useContext(SomeContext);
  const title = 'Hey Here';

  return (
      <IconModal
          className="header__modal__wrapper--info"
          label="Know more about this"
          icon="info"
      >
      {
        ({onClose}) => (
          <h2 className="info__subtitle text--uppercase">How This Works</h2>
          <h3 className="info__title">{title} = {context.name}</h3>
          <div className="info__body" dangerouslySetInnerHTML={{__html: context.hiw}} />
          <p className="font--semi-bold">
           <a href="#" target="_blank" onClick={() => onClose()}>View Legend</a>
          </p>
        )
      }
      </IconModal>
  );
}

export default function IconModal({
  label,
  icon,
  className,
  children
}) {
  const el = useRef();
  const [ isExpanded, setExpanded ] = useState(false);
  const onClickOutside = useCallback(() => setExpanded(false), []);
  const cx = classNames('modal__wrapper', className);

  useOnClickOutside(el, onClickOutside);

  return (
      <div className={cx} aria-expanded={isExpanded} ref={el}>
          <button onClick={() => setExpanded(!isExpanded)}
                  aria-label={label}
                  className="modal__action">
              <Icon name={icon} />
          </button>

          <span className="modal">
              <button className="modal__close" onClick={() => setExpanded(false)}>
                  <Icon name="close"/>
              </button>
              {children({onClose: () => setExpanded(isExpanded => !isExpanded)})}
          </span>
      </div>
  );
}

了解更多:https://reactjs.org/docs/render-props.html