Question

我正在使用我的雇主提供的“可重用组件库”来呈现复选框。复选框组件的代码是：

const CheckboxInput = (props) => {

 const { classNames, label, ...attrs } = props;
  return (
    <label className="foo">
      <Input
        { ...attrs }
        classNames={classnames(
          classNames,
          'bar')}
        type="checkbox"
      />
      <span className="foo"></span>
      {label &&
      <span className="foo">
        {label}
      </span>
      }
    </label>
  );
};

CheckboxInput.propTypes = {
  label: PropTypes.string,
  classNames: PropTypes.string
};

我希望标签的一部分为灰色，其余部分为默认样式。我能够使用以下任一实现：

<CheckboxInput
  label={<span>My unstyled string <span style={{ color: 'grey' }}>{'My String that I want to be grey'}</span></span>}
  checked={isChecked}
  onChange={ () => handleChange(e.target.value) }
/>

或

<CheckboxInput
  label={['My unstyled string', <span style={{ color: 'grey' }}>{'My String that I want to be grey'}</span>]}
  checked={isChecked}
  onChange={ () => handleChange(e.target.value) }
/>

遗憾的是，第一个实现引发了一个控制台错误：Invalid prop `label` of type `object` supplied to `CheckboxInput`, expected `string`.

第二个实现给出了一个控制台错误：Invalid prop `label` of type `array` supplied to `CheckboxInput`, expected `string`.。除了此错误：Each child in an array or iterator should have a unique "key" prop.

有没有办法绕过这个错误而不破坏性地编辑CheckboxInput组件？

Answer 1

如果您能声明node哪个是有效使用in render的任何内容，那将会有效：

//可以渲染的任何东西：数字，字符串，元素或者   包含这些类型的数组//（或片段）：

optionalNode：PropTypes.node，

CheckboxInput.propTypes = {
  label: PropTypes.node,
  classNames: PropTypes.string
};

是否可以将组件作为字符串prop？（使用组件库）

1 个答案: