javascript - 从父组件 React 渲染 HTML
问题描述
我在渲染中遇到了问题。我在网上做了一些搜索,但没有找到解决方案。
在父组件中:
<Child prop1={this.getHeader()}>
getHeader() : function () {
return (<div> Header </div>)
}
在子组件中:
render() : function () {
return (<div> {this.props.prop1} </div>)
}
但是,div 没有被渲染。我检查了其他解决方案并尝试了危险的SetInnerHTML,但它会呈现“ Header ”的字符串而不是元素。我能得到一些帮助吗?
解决方案
这是一个有效的解决方案:
class Parent extends React.Component {
getHeader() {
return <div> Header </div>;
}
render() {
return <Child prop1={this.getHeader()} />;
}
}
class Child extends React.Component {
render() {
return <div> {this.props.prop1} </div>;
}
}
ReactDOM.render(<Parent />, document.querySelector('#app'));
推荐阅读
- scipy - 不对称数据拟合函数
- configuration - 如何定义配置文件变量?
- react-native - 重定向回应用程序时如何捕获来自网络的响应?[React Native,深度链接]
- java - 在 Android Studio 的导航栏中替换片段时出错
- ios - 在 Objective-C 中的 WKWebView 上评估 JavaScript 时出现“发生 JavaScript 异常”
- ios - Firestore 文档创建失败且没有错误
- z3 - 如何限制 Z3 中数组的索引排序?
- javascript - 页面加载后谷歌地图不显示
- raspberry-pi - VPN 客户端配置使用 IPsec/L2TP 使用 debian raspberry pi
- .net-core - 如何确保 API 在第一次请求之前“预热”?