Reactjs 是否可以根据使用流量的另一个道具的存在或值计算反应组件道具的类型？

我试图根据另一个计算值的类型。如果prop1的类型是x，那么prop2的类型应该是y

例如，对于输入字段

    <Input
     type="number"
     onChange={(value: number | string) => {}}
    />

流正在抛出错误，因为如果使用

，则值可以是数字或字符串。在这种情况下，该值显然是数字，因为类型是

“number”

。有没有办法让flow明白在这种情况下这是一个数字

输入组件如下所示：

  type CommonProps = {
   disabled?: boolean,
   autoFocus?: boolean,
   placeholder: string
  };

  type PropsNumber = {
   type: 'number',
   onChange: (number) => void,
  };

  type PropsString = {
   type: 'string' | 'email',
   onChange: (string) => void,
  };

  type Props = CommonProps & (PropsNumber | PropsString);

  class Input extends React.Component<Props, {}> {
   render(){
     return (
        <input
          onChange={this.props.onChange}
          type={this.props.type}
          disabled={this.props.disabled}
          autoFocus={this.props.autoFocus}
        />
      );
    }
  }

type CommonProps={
禁用？：布尔值，
自动对焦？：布尔值，
占位符：字符串
};
类型PropsNumber={
键入：“编号”，
onChange：（数字）=>无效，
};
类型propssString={
键入：“字符串”|“电子邮件”，
onChange:（字符串）=>void，
};
类型Props=CommonProps&（PropsNumber | propssstring）；
类输入扩展了React.Component{
render（）{
返回(
);
}
}

获取错误

无法决定选择哪种情况，因为情况1[1]可能会起作用，但如果不起作用，情况2[2]看起来也很有希望。

无论在何处调用此组件。

---

为场景添加。

创建类型脚本正是为了确定值的类型，如果它是有条件的，它将失去其意义

在您的情况下，您最多只能选择两个不同的函数

onChange={
  type === "number" 
    ? (value: number) => {}
    : (value: string) => {}
}

---

解决这一问题的最佳方法是将常见道具的类型和排列组合在一起：

import React from 'react';

type CommonProps = {|
    autoFocus?: boolean,
    placeholder?: string,
|};

type PropsNumber = {
  type: "number",
  onChange: number => void,
  ...CommonProps,
};

type PropsString = {
  type: "string",
  onChange: string => void,
  ...CommonProps,
};

type Props = PropsNumber | PropsString;

class Input extends React.Component<Props> {
  render() {
    if (this.props.type === "number") {
      this.props.onChange(5);
    } else {
      this.props.onChange("foo");
    }
    (this.props.autoFocus: ?boolean);
    // placeholder
    return null;
  }
}

<Input type="number" onChange={(value: number) => {}}/>;

<Input type="string" onChange={(value: string) => {}}/>;

// Expected error 
<Input type="number" onChange={(value: string) => {}}/>;

从“React”导入React；
类型CommonProps={|
自动对焦？：布尔值，
占位符？：字符串，
|};
类型PropsNumber={
键入：“数字”，
onChange:number=>void，
…公共物品，
};
类型propssString={
键入：“字符串”，
onChange:string=>void，
…公共物品，
};
类型Props=PropsNumber | PropsString；
类输入扩展了React.Component{
render（）{
如果（this.props.type==“number”）{
本.道具.onChange（5）；
}否则{
这个.props.onChange（“foo”）；
}
（this.props.autoFocus:？布尔值）；
//占位符
返回null；
}
}
{}}/>;
{}}/>;
//预期误差
{}}/>;

（）

这将传递流，但预期的错误除外，该错误将类型指定为

number

，但回调采用的参数类型为

string

不建议将交点类型作为组合对象类型的方式。相反，应该使用类型排列，并且应该与一起使用

---

请注意，当您为了调用

onChange

而细化

props

的类型时，如果您做了比我这里的最小示例更复杂的事情，您可能会遇到。您可以通过将值拉出到

const

绑定中来解决这些问题。

虽然感觉不舒服，但我认为您所拥有的一切都很好，根据我的经验，通常是流程中的“完成的事情”。谢谢您的帮助。我试过你的答案，但在其他一些道具上出错了。（除了这两个组件之外，我还有其他的道具）。像

typeprops=（PropsNumber | PropsString）和CommonProps一样尝试了它。这有什么问题吗？这是错误流抛出
无法创建
Input`元素，因为属性
onChange
在对象类型[1]中丢失，但在props[2]中存在。流（推断错误）`没有完整的示例很难说。编辑您的原始问题，使其更接近您的真实问题（并包括flow.org/try链接），或者如果您认为您的新问题与我的问题不同，则创建一个新的顶级问题flow.org/try链接。你能检查一下吗？更新问题的其余部分，使之与flow.org/try链接相匹配，我再看一看。事实上，这个问题令人困惑，如果我根据你的flow.org/try链接回答，我的答案也会让后来的人感到困惑。修改问题以匹配游乐场链接。
import React from 'react';

type CommonProps = {|
    autoFocus?: boolean,
    placeholder?: string,
|};

type PropsNumber = {
  type: "number",
  onChange: number => void,
  ...CommonProps,
};

type PropsString = {
  type: "string",
  onChange: string => void,
  ...CommonProps,
};

type Props = PropsNumber | PropsString;

class Input extends React.Component<Props> {
  render() {
    if (this.props.type === "number") {
      this.props.onChange(5);
    } else {
      this.props.onChange("foo");
    }
    (this.props.autoFocus: ?boolean);
    // placeholder
    return null;
  }
}

<Input type="number" onChange={(value: number) => {}}/>;

<Input type="string" onChange={(value: string) => {}}/>;

// Expected error 
<Input type="number" onChange={(value: string) => {}}/>;