在组件上添加dom id

我不想更改的内部渲染,也不想对其进行包装。

如果通过“更改的内部渲染” <Component /> “你的意思是改变你从 render ,那么你就不走运了。这样做或包装是你唯一的选择;渲染后 div 是 组件的顶级元素。没有其他地方可以放 id .

所以你把它放在 部门 :

render() {
    return <div id={this.props.id}>Component </div>;
}

现场示例 (使用 Example 而不是 Component 避免混淆) :

class Example extends React.Component {
  render() {
    return <div id={this.props.id}>Component </div>;
  }
}

ReactDOM.render(
  <Example id={'myId'} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果右键单击上面的文本“Component”并检查DOM,您会发现该组件没有包装或类似的内容。(The id="root" 您看到的元素正是我在DOM中装入它的地方,因为React警告不要直接装入 document.body .)