- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我只是想知道是否有最佳实践方法来使用 ReactJS 动态呈现元素
考虑这些场景:
(1)参数工厂组件:
一个参数化的工厂组件,其工作是基于字符串参数渲染组件,有没有一种方法可以做到这一点而不必恢复到 React.createElement?
<pre><code>// The following doesn't work
class Quiz extends React.Component{
constructor (props){
super (props);
this.state = {
questionText: '',
correctAnswer: [],
assetType: ['DragNDrop','MultipleChoice','MatchPairs']
}
}
render(){
const { questionText, correctAnswer } = this.state;
return <{this.state.assetType[this.props.typeIndex] />;
}
}
</code></pre>
(2)动态HTML标签:
根据整数输入呈现不同的 HTML header 标记。为此,我最初尝试使用模板字符串,但不得不求助于条件渲染。
<pre><code>// No joy with Template strings
render (){
<{`h${this.state.headerSize}`}>
{this.state.headerText}
</ {`h${this.state.headerSize}`}>
}
我喜欢使用 JSX,如果能够使用动态元素名称来保持一致性就好了。
我也知道:
assetType: ['DragNDrop','MultipleChoice','MatchPairs']
可以存储为:
assetType: [<DragNDrop />,<MultipleChoice />, <MatchPairs />]
这会起作用。
我对 JSX 元素数组的一个问题是如何将这些 JSX 元素存储在数据库中?我猜我必须将它们存储为 Strings
但是当从 DB 中拉回时如何使用它们?
有人可以针对这些问题提出任何可行的最佳实践方法吗?
最佳答案
关于动态 HTML 标签:
编辑:
正如文档所建议的那样, Dynamic types can be used at runtime 如果先赋值给一个大写的变量:
class Quiz extends React.Component {
constructor(props) {
super(props);
this.state = {
questionText: '',
correctAnswer: [],
assetType: ['DragNDrop', 'MultipleChoice', 'MatchPairs']
}
}
render() {
const <b>E</b>lementNameStartsWithCapitalLetter = this.state.assetType[0];
// ^ -- capital letter here, ensure this works when used in JSX
return <b><ElementNameStartsWithCapitalLetter /></b>;
}
}
这是因为 User Defined JSX Components Must BE Capitalized 。
以前的解决方案:
使用 React.createElement:
class Quiz extends React.Component{
constructor (props){
super (props);
this.state = {
questionText: '',
correctAnswer: [],
assetType: ['DragNDrop','MultipleChoice','MatchPairs']
}
}
render(){
const { questionText, correctAnswer } = this.state;
{React.createElement(
[this.props.typeIndex],
{...questionText, ...correctAnswer}
);}
}
}
使用条件渲染:
// Conditional rendering works, but yuck!
// One condition per state works
// <b>but can be unnecessarily verbose</>
getHeader() {
switch(this.state.headerSize){
case 1:
return <h1>{ this.state.headerText }; <h1>
case 2:
return <h2>{ this.state.headerText }<h2>
.
.
.
default:
return null;
}
}
render (){
return { this.getHeader() }; // bound correctly in constructor of course :)
}
关于javascript - 动态 JSX 元素/标签名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41634517/
我正在尝试做这样的事情:Name[i] = "Name"+ (i+1) 在 forloop 中,这样数组的值将是:Name[0] = Name1,Name[1] = Name2,Name[2] = N
我读了here,在GSP中我们可以这样写: ${params.action} 从GSP中,我们可以使用${params.action}作为参数调用Javascript函数(请参阅here)。 是否有其
我的问题:非常具体。我正在尝试想出解析以下文本的最简单方法: ^^domain=domain_value^^version=version_value^^account_type=account_ty
我创建了一条与此类似的路线: Router::connect("/backend/:controller/:action/*"); 现在我想将符合此模式的每个 Controller 路由重命名为类似
我在 Visual Studio 2013 项目中收到以下警告: SQL71502 - Procedure has an unresolved reference to object 最佳答案 这可以
任何人都可以指导我使用名称/值 .NET 集合或 .NET 名称/值字典以获得最佳性能吗?请问最好的方法是什么?我的应用程序是 ASP.NET、WCF/WF Web 应用程序。每个集合应该有 10 到
我在 Zend Framework 2 中有一个默认模块: namespace Application\Controller; use Zend\Mvc\Controller\AbstractActi
这是表格: 关于javascript - 在 javascript 中,这是一个有效的结构吗? : document. 名称.名称.值?,我们在Stack Overflow上找到一个类似的
HtmlHelper.ActionLink(htmlhelper,string linktext,string action) 如何找出正确的路线? 如果我有这个=> HtmlHelper.Actio
我需要一些有关如何将 Controller 定义传递给嵌套在 outer 指令中的 inner 指令的帮助。请参阅http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan一个
请提出一个数据结构来表示内存中的记录列表。每条记录由以下部分组成: 用户名 积分 排名(基于积分)- 可选字段- 可以存储在记录中或可以动态计算 数据结构应该支持高效实现以下操作: Insert(re
错误 : 联合只能在具有兼容列类型的表上执行。 结构(层:字符串,skyward_number:字符串,skyward_points:字符串)<> 结构(skyward_number:字符串,层:字符
我想要一个包含可变数量函数的函数,但我希望在实际使用它们之前不要对它们求值。我可以使用 () => type 语法,但我更愿意使用 => type 语法,因为它似乎是为延迟评估而定制的。 当我尝试这样
我正在编写一个 elisp 函数,它将给定键永久绑定(bind)到当前主要模式的键盘映射中的给定命令。例如, (define-key python-mode-map [C-f1] 'pytho
卡在R中的错误上。 Error in names(x) <- value : 'names' attribute must be the same length as the ve
我有字符串,其中包含名称,有时在字符串中包含用户名,后跟日期时间戳: GN1RLWFH0546-2020-04-10-18-09-52-563945.txt JOHN-DOE-2020-04-10-1
有人知道为什么我会收到此错误吗?这显示将我的项目升级到新版本的Unity3d之后。 Error CS0103: The name `Array' does not exist in the curre
由于 Embarcadero 的 NNTP 服务器从昨天开始就停止响应,我想我可以在这里问:我使用非数据库感知网格,我需要循环遍历数据集以提取列数、它们的名称、数量行数以及每行中每个字段的值。 我知道
在构建Android应用程序的子项目中,我试图根据根build.gradle中的变量设置版本代码/名称。 子项目build.gradle: apply plugin: 'com.android.app
示例用例: 我有一个带有属性“myProperty”的对象,具有 getter 和 setter(自 EcmaScript 5 起支持“Property Getters 和 Setters”:http
我是一名优秀的程序员,十分优秀!