Question

我有一个更高阶的组件，我需要在<ul>和非列表元素中使用。 <li>被设计为在它们之间添加填充/分隔符等。我不想将高阶组件包装在<li>中，因为它是可点击的，然后点击目标会减少由于<li>上的填充。

我想我只是将一个道具传递给组件，以便我可以根据它的使用位置更改它的基本元素类型：

const Component = React.createClass({
  getDefaultProps() {
    return {
      elementType: 'li',
    };
  },

  render() {
    return (
      <this.props.elementType onClick={ ... }>
        { content }
      </this.props.elementType>
    );
  },
});

它似乎正确地渲染基本元素。但是，当我在<ul>：

中使用它时

<ul>
  <Component />
  <Component />
</ul>

React会自动将Component包裹在<li>中（即使它的基本元素已经是<li>），这会导致React抱怨将<li>嵌套在彼此之内： validateDOMNesting(...): <li> cannot appear as a descendant of <li>.

我正在使用React 15.0.2。我知道他们最近在<span>中添加了＃{1}}，而是使用了反应文本注释节点，例如"text"，所以我有点困惑为什么这个功能也没有改变。< / p>

我很好奇是否有办法绕过这种自动换行，或者我只需通过将样式应用于<li> s中的元素而不是<li> s来解决这个问题。自己。

编辑：这也发生在非jsx语法中：

React.createElement(
  this.props.elementType,
  ...
)

编辑：这似乎是某种非常奇怪的缓存问题。通过注释然后取消注释第二个组件，我能够再次获得预期的行为。：S

在ul元素内部反应自动包装高阶组件

0 个答案: