为什么我不能在#root
上同时渲染两个组件?
ReactDOM.render(<Button text="Add"/>, window.root);
ReactDOM.render(<Button text="Delete"/>, window.root);
这只会将第二个按钮添加到#root
import React from 'react';
import ReactDOM from 'react-dom';
const Button = ({ text, styleClass, onClick }) => {
return (
<button
type="button"
onClick={e => onClick(e)}
onToggle={e => onToggle(e)}
className={'btn ${styleClass}'}
>
{text}
</button>
);
};
ReactDOM.render(<Button text="Add"/>, window.root);
ReactDOM.render(<Button text="Delete"/>, window.root);
<div id="root"></div>
答案 0 :(得分:3)
因为它基本上显示了您要渲染的最后一个组件。
看看文档:{{3}}
ReactDOM.render(element, container[, callback])
渲染一个React元素 放入提供的容器中的DOM中,并返回对 组件(对于无状态组件,则返回null)。如果React元素先前已渲染到容器中,则将执行 更新它,仅在必要时更改DOM以反映 最新的React元素。
答案 1 :(得分:2)
为什么我不能在#root上渲染两个组件
因为后一个按钮取代了前一个按钮。
如果要渲染两个按钮,可以执行以下操作:
import React from 'react';
import ReactDOM from 'react-dom';
const Button = ({ text, styleClass, onClick }) => {
return (
<button
type="button"
onClick={e => onClick(e)}
onToggle={e => onToggle(e)}
className={'btn ${styleClass}'}
>
{text}
</button>
);
};
ReactDOM.render(
<div>
<Button text="Add"/>
<Button text="Delete"/>
</div>,
window.root //or document.getElementById('root')
);
<div id="root"></div>
一个小例子
const Button = ({text}) => <button>{text}</button>
ReactDOM.render(
<div>
<Button text='Add'/>
<Button text='Delete'/>
</div>,
document.getElementById('root')
)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"><div>
答案 2 :(得分:1)
第二个覆盖第一个呈现的dom ...
ReactDOM.render(
<>
<Button text="Add"/>
<Button text="Add"/>
<\>,
window.root
);
这将改为显示2个按钮