如何根据其他道具的值设置 defaultProp 值？

Question

我有一个组件，其中一个道具的默认值取决于另一个道具的值（默认或用户提供）。我们无法执行以下操作，因为我们无权访问 this:

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

我怎样才能最好地做到这一点？

Answer 1

你可以在 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>
  );
}

Answer 2

我宁愿建议你：

将该变量作为实例变量存储在组件的 class
评估它是否是状态变量而不是道具（或实例）

顺便说一下，在这两种情况下，您都应该检查新道具何时到达组件并在需要时更新它。

我会为状态变量写这样的东西：

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 而无需考虑确定它的值。

Answer 3

我遇到了类似的问题，我发现在这个讨论中缺少一个基于 method 的解决方案，因此我正在写这个答案

有两种情况你可能想要传递默认属性

情况 1：当您想根据 Static 值

选择 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>;
  }
}

Answer 4

使用函数组件你可以这样做：

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

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

如何根据其他道具的值设置 defaultProp 值？

How to set defaultProp value based on value of other prop?

reactjs

react-proptypes