Question

我的反应网站上有问题。我有一个我导出的课程

class Input extends React.Component {
  render() {
    const CustomMapping = [
      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '@'],
      ['z', 'x', 'c', 'v', 'b', 'n', 'm', '.com']
    ];

    return (
      <KeyboardedInput
        enabled
        type={this.props.type}
        value={this.props.value}
        name={this.props.name}
        defaultKeyboard={CustomMapping}
      />
    );
  }
}
export default Input;

我将其导入其他文件中，但我不知道如何添加一些道具来完成它。

请帮帮我！ :) 祝你有一个美好的一天或晚上;）

Answer 1

在另一个文件中将其命名为

<Input type="input" value="abc" name="email" />

此外，添加构造函数到输入文件

constructor(props) {
   super(props);
}

Answer 2

如果我正确理解你的问题，你想为你添加一些额外的道具输入？或者你只想传递预期的道具？

 class Input extends React.Component {
  render() {
    const CustomMapping = [
      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '@'],
      ['z', 'x', 'c', 'v', 'b', 'n', 'm', '.com']
    ];

    const { type, value, name, ...extraProps } = this.props;

    return (
      <KeyboardedInput
        enabled
        type={type}
        value={value}
        name={.$name}
        defaultKeyboard={CustomMapping}
        {...extraProps}
      />
    );
  }
}
export default Input;

在导入Input的组件中，只需将它们添加为常规道具：

 class Whatever extends React.Component {
  render() {

    return (
      <Input
        type={'input'}
        value={'abc'} 
        name={'email'}
        color={'green'}
      />
    );
  }
}
export default Whatever;

在导入类之后反应放一些道具

2 个答案: