是否可以将组件作为字符串道具传递？（使用组件库）

Question

我正在使用我的雇主提供的 'reusable component library' 来呈现一个复选框。复选框组件的代码是：

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:

// Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types:

optionalNode: PropTypes.node,

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

是否可以将组件作为字符串道具传递？（使用组件库）

Is it possible to Pass Component as string prop?(Working with component libraries)

javascript

reactjs

react-proptypes