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

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

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

---

我如何才能最好地做到这一点？

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

render（）{
const delay=this.props.trigger=='hover'？100:0；
//你的其他道具
返回(
//或
{/*…还有别的事，用你的延迟时间*/}
);
}

我建议您：

• 将该变量作为实例变量存储在组件的类中
• 评估它是否是状态变量而不是属性（或实例）

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

我会选择state变量并编写如下内容：

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() {
    ...
  }
}

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

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

---

通过这种方式，您可以在渲染方法中使用

this.state.delay

，而无需考虑其值的确定。

我遇到了类似的问题，我发现在本次讨论中缺少基于

方法的解决方案，因此我正在编写此答案

在两种情况下，您可能希望通过默认道具

案例1：根据静态值选择defaultProps时

案例2：基于方法选择defaultProps时

案例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>;
  }
}

使用功能组件，您可以这样做：

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() {
    ...
  }
}

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

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

函数MyComponent({
触发
延迟：触发器=='hover'？100:0，
}) {
返回。。。
}
MyComponent.propTypes={
触发器：PropTypes.string.isRequired，
延迟：需要PropTypes.number.isRequired，
};
这只是依赖的默认值还是道具？您可能需要问问自己，这到底是道具还是状态属性。实际上，我想在许多实例方法和生命周期挂钩中访问此道具值。我是否需要将其保存到此

中？尽管这样做是不好的，而且一旦异步呈现出现就会不安全。这就是为什么我想把它放在道具里面。@mohsinulhaq你可以把它保存到这里，但你不需要。它只取决于触发器，您可以使用像getDelay（）这样的方法来获取延迟值。