web-dev-qa-db-ja.com

他の小道具の値に基づいてdefaultProp値を設定するにはどうすればよいですか？

ある小道具のデフォルト値が別の小道具の値に依存するコンポーネントがあります（デフォルトまたはユーザー提供）。 thisにアクセスできないため、次のことはできません。

static defaultProps = {
    delay: this.props.trigger === 'hover' ? 100 : 0,
    trigger: 'hover'
};

どうすればこれを行うのが最善ですか？

reactjsreact-proptypes
8
mohsinulhaq

私はむしろあなたに次のことを提案したいと思います：

  • その変数をインスタンス変数としてコンポーネントのクラスに格納します
  • それが小道具（またはインスタンス）ではなく状態変数であるかどうかを評価します

ちなみに、どちらの場合も、新しい小道具がコンポーネントに到着するタイミングを確認し、必要に応じて更新する必要があります。

状態変数を取得して、次のように記述します。

class MyComponent extends React.Component {
  static propTypes = {
    trigger: PropTypes.string,
  }

  static defaultProps = {
    trigger: 'hover',
  }

  constructor(props) {
    super(props);
    this.state = {
      delay: this.computeDelay(),
    }
  }

  componentWillReceiveProps(nextProps) {
    const { trigger: oldTrigger } = this.props;
    const { trigger } = nextProps;
    if (trigger !== oldTrigger) {
      this.setState({
        delay: this.computeDelay(),
      })
    }
  }

  computeDelay() {
    const { trigger } = this.props;
    return trigger === 'hover' ? 100 : 0;
  }

  render() {
    ...
  }
}

このようにして、値を決定することなく、renderメソッドでthis.state.delayを使用できます。

3
LucioB

Renderメソッド内でそれを行うことができます。

render() {
  const delay = this.props.trigger === 'hover' ? 100 : 0;
  // Your other props

  return (
    <SomeComponent delay={delay} />
    // or
    <div>
      {/*...something else, use your delay */}
    </div>
  );
}
4
Anthony Liu

関数コンポーネントを使用すると、次のように実行できます。

function MyComponent({
    trigger,
    delay: trigger === 'hover' ? 100 : 0,
}) {
  return <div>...</div>
}

MyComponent.propTypes = {
  trigger: PropTypes.string.isRequired,
  delay: PropTypes.number.isRequired,
};
1
TVG

私は同様の問題に直面していて、この議論にmethodベースの解決策が欠けているのを見つけたので、この答えを書いています

デフォルトの小道具を渡したい場合は2つあります

ケース1：静的値に基づいてdefaultPropsを選択する場合

ケース2：メソッドに基づいてdefaultPropsを選択する場合

Case 1のソリューション

class Shape extends Component{
  static defaultProps = {
    colour: 'red',
  }
  render(){
   const {colour} = this.props;
   // Colour will always be 'red' if the parent does not pass it as a prop
   return <p>{colour}</p>;
  }
}

Case 2のソリューション

class Shape extends Component{
  calcArea = () => {
    console.log("Area is x");
  }
  render(){
   const {calcArea} = this.props;
   // calcArea will be evaluated from props then from the class method
   return <button onClick={calcArea || this.caclArea}></button>;
  }
}
0
malik bagwala