- html - 我的下拉菜单的内容关闭得太快
- c# - 使用 Html Agility Pack 从网页中的表中获取值而不使用 "SelectNode'
- html - 内容容器下的 CSS 下拉菜单
- html - 如何停止嵌套列表重叠父列表?
我想知道在 React 中创建动态选择组件的规范方法是什么。我是否必须创建一个单独的组件来根据下面的代码返回选项,以便能够通过每个条目的 props 自定义值,然后将它们包含到单独的选择组件中? p>
class ListEntry extends React.Component {
render = () => {
return(
<option value={this.props.ovalue}>{this.props.ovalue}</option>
)
}
}
class SomeList extends React.Component {
genstuff = (n) => {
var theEntries = [];
for(var i = 0; i < n; i++) {
theEntries.push(<ListEntry ovalue={Math.random().toString()} />)
};
return(theEntries)
}
render = () => {
var entries = this.genstuff(10);
return(
<select>
{entries}
<ListEntry ovalue="a basic entry"/>
<ListEntry ovalue="another"/>
</select>
)
}
}
是否有另一种“接受”的方法可以在 SomeList 组件本身中执行此操作?如果是的话,有哪些优点、缺点?
我也(成功)对 svg 元素使用了这种技术,因此上述问题也适用:
class SmallCircle extends React.Component {
render = () => {
return(
<circle cx={this.props.scx} cy={this.props.scy} r="5"
stroke="blue" fill="dodgerblue" strokeWidth="2"/>)
}
}
class SomeSvg extends React.Component {
randomCoords = (n, domain) => {
let xs = [...Array(n).keys()].map(i=> {
return {
"i": i,
"x": Math.floor(Math.random() * domain + 1).toString(),
"y": Math.floor(Math.random() * domain + 1).toString()
}
})
return(xs)
}
render = () => {
var svgcoords = this.randomCoords(5000, 700);
var thecircles = svgcoords.map(xy => <SmallCircle key={xy.i.toString() + xy.x.toString() + xy.y.toString()}
scx={xy.x} scy={xy.y} />);
return(
<svg width="700" height="700">
{thecircles}
<circle cx="1" cy="1" r="100" stroke="orange" strokeWidth="7" fill="grey" />
<circle cx="700" cy="700" r="100" stroke="green" strokeWidth="7" fill="grey" />
<circle cx="1" cy="700" r="100" stroke="red" strokeWidth="7" fill="grey" />
<circle cx="700" cy="1" r="100" stroke="blue" strokeWidth="7" fill="grey" />
<SmallCircle scx="200" scy="200" />
</svg>
)
}
}
所以基本上我的问题是,React 是否要求您始终将分层组件结构“展开”(即展平)为多个细粒度的顶级组件?
这是输出,顺便说一句:
编辑:我确实意识到我没有为每个选择条目添加“键”,并且它在控制台中提示,但问题不受此影响。
最佳答案
不,React 并不要求您这样做。如果您愿意,您可以将所有 React 代码放入 1 个巨型组件中。
那么,为什么不这样做呢?实际上有很多原因:可读性、可重用性、可测试性、可维护性等等。
含义:当您需要某些逻辑独立时,您可以创建单独的组件。在您的问题中,您将 ListEntry 作为单独的组件。为什么?如果您不在代码中的其他任何地方使用该组件,则可以根据需要将该逻辑放入 SomeList 中。
我认为你问题的关键是:如果你不使用 React.Component 的任何逻辑,你就不需要继承它。基本的“无状态组件”可以编写为函数:
function MyComponent(props) {
(...some logic...)
return <option>{ props.value }</option>;
}
或者,ES6 等效项:
const MyComponent = props => {
(...some logic...)
return <option>{ props.value }</option>;
}
或者,如果您根本不需要渲染中的任何逻辑:
const MyComponent = props => <option>{ props.value }</option>;
因此,您可以在组件中定义此函数 render
(或者在无状态组件的函数体中),如下所示:
class SomeList extends Component {
render() {
const ListEntry = props => <option>{ props.value }</option>;
return (
<select>
{ [...Array(10).keys()].map(x => (
<ListEntry key={x} value={Math.random()} />
))}
<ListEntry value="basic" />
<ListEntry value="another" />
</select>
);
}
}
这里是我们的 ListEntry
的代码组件在 SomeList 组件的渲染中定义。 (免责声明:我认为 render
不是最好的地方,这只是为了说明这一点)。不过,我真的不认为这样做有什么意义。既然ListEntry不包含任何逻辑,为什么不使用 <option>
直接代替ListEntry?它可以很简单:
const SomeList = () => {
return (
<select>
{ [...Array(10).keys()].map(index => (
<option key={index}>{ Math.random() }</option>
))}
<option>Basic</option>
<option>Another</option>
</select>
);
};
对于您的 SVG 示例:如果您采用上述内容并为您需要的组件创建函数,则可以这样写:
const SomeSvg = () => {
const SmallCircle = props => (
<circle {...props} r="5" stroke="blue" fill="dodgerblue" strokeWidth="2" />
);
const BigCircle = props => (
<circle {...props} r="100" strokeWidth="7" fill="grey" />
);
const randomCoords = (n, domain) => [...Array(n).keys()].map(() => ({
x: Math.floor(Math.random() * domain + 1),
y: Math.floor(Math.random() * domain + 1)
}));
return (
<svg width="700" height="700">
{ randomCoords(5000, 700).map((xy, i) => <SmallCircle key={i} cx={xy.x} cy={xy.y} />) }
<BigCircle cx="1" cy="1" stroke="orange" />
<BigCircle cx="700" cy="700" stroke="green" />
<BigCircle cx="1" cy="700" stroke="red" />
<BigCircle cx="700" cy="1" stroke="blue" />
<SmallCircle cx="200" cy="200" />
</svg>
);
};
关于reactjs - 我是否*必须*展平 React.JS 中的所有分层组件声明?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45693405/
我感到困惑...... 我在 .jsp 中编写了一个小例程。最后需要关闭ResultSet、Statement和Connection。我也在finally { }中编写了结束代码,但是当页面运行时,它
我在 Stack Overflow 上读到一些 C 函数是“过时的”或“应该避免”。你能给我一些这种功能的例子以及原因吗? 这些功能有哪些替代方案? 我们可以安全地使用它们 - 有什么好的做法吗? 最
我正在构建一个应用程序,它可以拍照、显示图片,然后一旦被点击,就会在点击的任何地方返回图片的颜色。 它在崩溃之前到达了水龙头。我得到 x 必须是 < bitmap.width() 的错误 就我的理解而
我试图根据几个因素向用户提出建议: •建议只能是同一所大学的学生•建议必须至少匹配一个其他字段 我以为我有它,但问题是这个查询将返回同一所学校的所有学生,而不管其他情况: PUT /user/.per
我的应用程序必须从第三方读取 SSL 网址。我如何最好地将第三方凭证存储在我自己的数据库中,以保护第三方凭证不被泄露?兼顾绝对的安全性和实用性。对凭据进行单向哈希处理没有用,因为我必须将凭据恢复为明文
在我的 Rails API 中,我希望 Mongo 对象作为 JSON 字符串返回,Mongo UID 作为“id”属性而不是“_id”对象。 我希望我的 API 返回以下 JSON: { "
假设应用层协议(protocol)是通过UDP实现的。客户端需要超时,因此服务器需要保留与其通信的每个客户端的状态。 还假设使用了select。 实现多线程服务器总是最好的吗?我认为链接列表也会做同样
考虑一个非常短的程序,我在其中分配了一点内存。我被告知,GC 在程序分配大量内存并且分配达到限制的情况下运行。 我不知道这个限制到底是多少,但我认为它必须足够高,这样 GC 才不会频繁运行并减慢程序的
根据 Cocoa with Love当应用程序需要 WiFi(而不是蜂窝网络)时需要可达性,例如如果应用加载大量视频并且不适合在 3G 网络上使用。 我的应用程序使用互联网,无论是 WiFi 还是 3
我正在寻找更好的解决方案来解决我面临的这个问题。 如果您将鼠标悬停在缩略图上,它会淡出较大的镜头并淡入新的镜头,这很好,但是当转到目标缩略图并且您的鼠标再悬停一些时,它会更改为您的鼠标经过并拍摄的其他
启用 UAC 并使用管理帐户登录后,您将获得两个 token : 提升的 token ;这已启用 Administrators 组,具有高完整性(即强制性完整性标签 SID 为 S-1-16-1228
我想知道在 React 中创建动态选择组件的规范方法是什么。我是否必须创建一个单独的组件来根据下面的代码返回选项,以便能够通过每个条目的 props 自定义值,然后将它们包含到单独的选择组件中? p>
我有一个启用了分页的数据网格。我根据过滤条件在数据网格中显示结果。我已经过滤了数据,现在有 2 页。当我转到第二页时。我正在再次执行搜索功能以缩小结果范围。然后我收到类似“无效的 CurrentPag
我有原始文本列,其值类似于“2012-07-26T10:33:34”和“2012-07-26T10:56:16”。在使用 Joda-Time 的 Java 中,我可以通过调用 轻松地将其转换为日期/从
您好,我被分配了一项棘手的任务。我需要让一个方形 div 到达顶部的一个点。基本上它看起来像一个正方形 div,顶部有一个宽三 Angular 形。请参阅下面的屏幕截图。顶部的深蓝色只是堆叠在白色 d
我想知道,为什么我们在 android 中使用不同的启动器图标(大小)。目前您“必须”将图标大小调整为: LDPI - 36 x 36 MDPI - 48 x 48 HDPI - 72 x 72 XH
在 SO 的几个地方,声称必须知道对象的确切类型并基于此做出决定(以 if-then-else 方式)指向一个设计缺陷,例如here . 我想知道是否总是如此。在当前的一个小型教育项目(我正在使用它来
据我了解,迭代器是一种为客户端提供接口(interface)以观察/迭代/传递自定义集合等内容的机制,而不破坏信息隐藏原则。 STL 容器有自己的迭代器,所以我们可以毫无问题地对它们使用 for (
我在 Golang 中编写了一个包装函数,用于从多个文件中渲染模板,如下所示: func RenderTemplate(w http.ResponseWriter, data interface{},
据我了解,size_type 和 difference_type 的目的不仅仅是符号——它也是为了解决例如分段架构等,它们可能具有不同的大小。 在这种情况下,如果我有一个带有随机访问迭代器的容器,那么
我是一名优秀的程序员,十分优秀!