我的目标是在页面/父组件上动态添加组件。
我从一些基本的示例模板开始,如下所示:
main.js:
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId'));
App.js:
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component! </h1>
<div id="myId">myId div</div>
</div>
);
}
});
SampleComponent.js:
var SampleComponent = React.createClass({
render: function() {
return (
<div>
<h1>Sample Component! </h1>
</div>
);
}
});
这里
SampleComponent
被挂载到<div id="myId"></div>
节点,该节点是预先写在App.js
模板中的。但是如果我需要向App组件添加不定数量的组件怎么办?显然我无法将所有必需的 divs 坐在那里。
在阅读了一些教程后,我仍然不了解如何动态创建组件并将其添加到父组件。有什么方法可以做到吗?
您需要将组件作为子组件传递,如下所示:
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(
<App>
<SampleComponent name="SomeName"/>
<App>,
document.body
);
然后将它们附加到组件的主体中:
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component! </h1>
{
this.props.children
}
</div>
);
}
});
你不需要手动操作 HTML 代码,React 会为你做这件事。如果你想添加一些子组件,你只需要更改 props 或声明它取决于。例如:
var App = React.createClass({
getInitialState: function(){
return [
{id:1,name:"Some Name"}
]
},
addChild: function() {
// State change will cause component re-render
this.setState(this.state.concat([
{id:2,name:"Another Name"}
]))
}
render: function() {
return (
<div>
<h1>App main component! </h1>
<button onClick={this.addChild}>Add component</button>
{
this.state.map((item) => (
<SampleComponent key={item.id} name={item.name}/>
))
}
</div>
);
}
});
根据克里斯的回答,在这里分享我的解决方案。希望它可以帮助其他人。
我需要动态地将子元素附加到我的 JSX 中,但方式比 return 语句中的条件检查更简单。我想在子元素尚未准备好的情况下显示加载程序。在这里:
export class Settings extends React.PureComponent {
render() {
const loading = (<div>I'm Loading</div>);
let content = [];
let pushMessages = null;
let emailMessages = null;
if (this.props.pushPreferences) {
pushMessages = (<div>Push Content Here</div>);
}
if (this.props.emailPreferences) {
emailMessages = (<div>Email Content Here</div>);
}
// Push the components in the order I want
if (emailMessages) content.push(emailMessages);
if (pushMessages) content.push(pushMessages);
return (
<div>
{content.length ? content : loading}
</div>
)
}
现在,我确实意识到我也可以将
{pushMessages}
和 {emailMessages}
直接放在下面的 return()
中,但假设我有更多条件内容,我的 return()
就会看起来很混乱。
首先,我不会使用 document.body。相反,添加一个空容器:
index.html:
<html>
<head></head>
<body>
<div id="app"></div>
</body>
</html>
然后选择仅渲染您的
<App />
元素:
main.js:
var App = require('./App.js');
ReactDOM.render(<App />, document.getElementById('app'));
在
App.js
中,您可以导入其他组件并完全忽略 DOM 渲染代码:
App.js:
var SampleComponent = require('./SampleComponent.js');
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component!</h1>
<SampleComponent name="SomeName" />
</div>
);
}
});
SampleComponent.js:
var SampleComponent = React.createClass({
render: function() {
return (
<div>
<h1>Sample Component!</h1>
</div>
);
}
});
然后,您可以使用
require
将任意数量的组件导入到必要的组件文件中,以编程方式与它们进行交互。
首先警告:你永远不应该修改由 React 管理的 DOM,这是通过调用
ReactDOM.render(<SampleComponent ... />);
来完成的
使用 React,您应该直接在主应用程序中使用 SampleComponent。
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(<App/>, document.body);
你的组件的内容是无关紧要的,但应该这样使用:
var App = React.createClass({
render: function() {
return (
<div>
<h1>App main component! </h1>
<SampleComponent name="SomeName"/>
</div>
);
}
});
然后,您可以扩展应用程序组件以使用列表。
var App = React.createClass({
render: function() {
var componentList = [
<SampleComponent name="SomeName1"/>,
<SampleComponent name="SomeName2"/>
]; // Change this to get the list from props or state
return (
<div>
<h1>App main component! </h1>
{componentList}
</div>
);
}
});
我真的建议您查看 React 文档,然后按照“入门”说明进行操作。您花在这上面的时间稍后会得到回报。
自 React 18 起,您必须使用
createRoot
和 hydrateRoot
方法。
对于客户端渲染:
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); //createRoot(container!) if you use TypeScript
root.render(<MyComponent />);
对于服务器端渲染:
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <MyComponent />);
仅供参考:检查反应指南