تفاعل التحذير من نوع المكونات المركبة

1

لدي مكون مركب بسيط مع مجموعة من المكونات الفرعية الثابتة:

// @flow
import React, { Component, Children } from 'react';

type Props = {
  children: React.ChildrenArray<React.Node> | React.Node,
}

class Toggle extends Component<Props> {
  static On = props => (props.on ? props.children : null);

  static Off = props => (props.on ? null : props.children);

  static Button = props => (
    <button
      onClick={props.toggle}
      type="button"
      style={{ display: 'inline-block' }}
    >
      <pre>{JSON.stringify(props.on, null, 2)}</pre>
    </button>
  );

  state = { on: false }

  toggle = () => {
    this.setState(
      ({ on }) => ({ on: !on }),
      // maybe this.props.someCallback
      () => console.log(this.state.on),
    );
  }

  render() {
    return Children.map(
      this.props.children,
      childElem => React.cloneElement(childElem, {
        on: this.state.on,
        toggle: this.toggle,
      }),
    );
  }
}

export default Toggle;

يحدث التحذير عندما أحاول وضع بعض العناصر الأخرى في نطاق تبديل الأطفال. فمثلا:

<Toggle>
  <Toggle.On>On</Toggle.On>
  <span /> <-- this is savage
  <Toggle.Button />
  <Toggle.Off>Off</Toggle.Off>
</Toggle>

كل شيء يعمل ، لكن نوعي الانسيابي يحذرني من هذا الامتداد هكذا:

Warning: Received `false` for a non-boolean attribute `on`.....
Warning: Invalid value for prop `toggle` on <span> tag....

كيف يمكنني تهدئة هذه الفتاة السيئة؟

1 إجابة

0

شكرًا يا رفاق ، أعتقد أن الحل الصحيح هو مجرد التحقق مما إذا كان نوع العقدة المركبة صحيحًا ، وإلا - فقط عقدة استنساخ مع دعائم العقدة العادية:

// @flow
import React, { Component, Children } from 'react';

type Props = {
  children: React.ChildrenArray<React.Node> | React.Node,
}

class Toggle extends Component<Props> {
  static On = props => (props.on ? props.children : null);

  static Off = props => (props.on ? null : props.children);

  static Button = props => (
    <button
      onClick={props.toggle}
      type="button"
      style={{ display: 'inline-block' }}
    >
      <pre>{JSON.stringify(props.on, null, 2)}</pre>
    </button>
  );

  state = { on: false }

  toggle = () => {
    this.setState(
      ({ on }) => ({ on: !on }),
      // maybe this.props.someCallback
      () => console.log(this.state.on),
    );
  }

  // Checking here
  allowedTypes = ({ type }) => {
    return [
      (<Toggle.On />).type,
      (<Toggle.Off />).type,
      (<Toggle.Button />).type,
    ].includes(type);
  }

  render() {
    return Children.map(
      this.props.children,
      (childElem) => {
        const elemProps = this.allowedTypes(childElem) ? {
          on: this.state.on,
          toggle: this.toggle,
        } : childElem.props;
        return React.cloneElement(childElem, elemProps);
      },
    );
  }
}

export default Toggle;
:مؤلف
فوق
قائمة طعام