Question

不是指魔术props.children，但是我可以强制子元素在它产生的顶级元素上具有特定属性（或属性的附加值）吗？示例场景：

const Button = 
  (props) => 
    ( <button type="button" id={props.id} className={['btn'].concat(props.classNames)}>{props.children}</button>);

希望不必做classNames道具，让父母强迫额外的课程没有儿童互动/参与/同意。

如果能够允许的话，除了额外的CSS课程之外，还会更好，但那是当前的目标。

是否有可能在没有他们知道的情况下对孩子这样做？

Answer 1

您可以使用React.cloneElement()克隆每个孩子，这样您就可以合并自己的道具......

React.Children.map(props.children, child => {
  return React.cloneElement(child, { newProp: 1, otherProp: 'XYZ' });
});

...所以，你的看起来可能是这样的：

const Button = (props) => {
  const className = ['btn'].concat(props.classNames).join(' ');

  <button type="button" id={props.id} className={className}>
    {
      React.Children.map(children, child => (
        React.cloneElement(child, { className })
      ))  
    }
  </button>
};

Answer 2

要回答您的问题，您可以使用{...this.props}或使用引用在父类的componentDidMount / componentDidUpdate中强制应用该类。

但是我真的尝试不使用任何一种方法。当DOM节点上设置了未知属性时，当前版本的React会发出警告，{...this.props}会引导您经常访问。命令式方法也不好，因为它打破了功能数据流，基本上使得使用React过时了。

我真的会非常明确地想要从组件中获得哪些功能/外观，并通过道具严格指定它们。这意味着同时将className，style和其他属性放在那里似乎微不足道。通常，使用更多语义道具也是有帮助的：例如colorScheme="confirm"，size="big"，type="outline"是可能对Button组件有用的示例。这样，当在多个地方使用按钮时，可以避免一些重复。

如果您告诉我有关您的具体用例的更多信息，我认为可能有一个很好的解决方案。

我可以强迫儿童使用属性吗？

2 个答案: