假设我有一个具有条件渲染的视图组件:
render(){
if (this.state.employed) {
return (
<div>
<MyInput ref="job-title" name="job-title" />
</div>
);
} else {
return (
<div>
<MyInput ref="unemployment-reason" name="unemployment-reason" />
<MyInput ref="unemployment-duration" name="unemployment-duration" />
</div>
);
}
}
MyInput看起来像这样:
class MyInput extends React.Component {
...
render(){
return (
<div>
<input name={this.props.name}
ref="input"
type="text"
value={this.props.value || null}
onBlur={this.handleBlur.bind(this)}
onChange={this.handleTyping.bind(this)} />
</div>
);
}
}
让我们说employed是真的.每当我将其切换为false而另一个视图呈现时,只会unemployment-duration重新初始化.还会unemployment-reason预先填充值job-title(如果在条件更改之前给出了值).
如果我将第二个渲染例程中的标记更改为如下所示:
render(){
if (this.state.employed) {
return (
<div>
<MyInput ref="job-title" name="job-title" />
</div>
); …我写了一些代码来渲染ReactJS中的重复元素,但我讨厌它是多么丑陋.
render: function(){
var titles = this.props.titles.map(function(title) {
return <th>{title}</th>;
});
var rows = this.props.rows.map(function(row) {
var cells = [];
for (var i in row) {
cells.push(<td>{row[i]}</td>);
}
return <tr>{cells}</tr>;
});
return (
<table className="MyClassName">
<thead>
<tr>{titles}</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
有没有更好的方法来实现这一目标？
(我想for在模板代码中嵌入循环,或者类似的方法.)
我内置有应用ReactNative无论是iOS和了Android 的ListView.使用有效数据源填充列表视图时,屏幕底部会显示以下警告:
警告:数组或迭代器中的每个子节点都应该具有唯一的"键"支柱.检查渲染方法
ListView.
这个警告的目的是什么？在消息之后,它们链接到以下页面:https://fb.me/react-warning-keys,其中讨论了完全不同的内容,这些内容与本机反应无关,但与基于web的reactjs无关.
我的ListView是用这些语句构建的:
render() {
var store = this.props.store;
return (
<ListView
dataSource={this.state.dataSource}
renderHeader={this.renderHeader.bind(this)}
renderRow={this.renderDetailItem.bind(this)}
renderSeparator={this.renderSeparator.bind(this)}
style={styles.listView}
/>
);
}
我的DataSource包含以下内容:
var detailItems = [];
detailItems.push( new DetailItem('plain', store.address) );
detailItems.push( new DetailItem('map', '') );
if(store.telefon) {
detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') );
}
if(store.email) {
detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') );
}
detailItems.push( new DetailItem('moreInfo', '') );
this.setState({
dataSource: this.state.dataSource.cloneWithRows(detailItems)
});
ListView-Rows使用以下内容进行渲染:
return (
<TouchableHighlight underlayColor='#dddddd'> …在flutter docs中,有一个无状态小部件子类的示例代码,如下所示:
class GreenFrog extends StatelessWidget {
const GreenFrog({ Key key }) : super(key: key);
@override
Widget build(BuildContext context) {
return new Container(color: const Color(0xFF2DBD3A));
}
}
还有这个
class Frog extends StatelessWidget {
const Frog({
Key key,
this.color: const Color(0xFF2DBD3A),
this.child,
}) : super(key: key);
final Color color;
final Widget child;
@override
Widget build(BuildContext context) {
return new Container(color: color, child: child);
}
}
什么是关键,什么时候应该使用这个超级构造函数？好像你有自己的构造函数,你必须有{Key key}为什么？我已经看到了其他没有使用super关键字的例子,所以这就是我的困惑所在.
我有一个名为OrderItem的组件,它接受一个包含多个对象(至少两个)的对象,并将它们呈现为表中的多个行.表中将有多个OrderItem组件.问题是在组件的渲染功能中,我不能返回多行.我只能返回一个组件,如果我将它们包装在一个div中,它会说" <tr>不能作为一个孩子出现<div>"
代码看起来像这样(为了更容易阅读,我留下了一些东西)
Parent() {
render() {
return (
<table>
<tbody>
{
_.map(this.state.orderItems, (value, key) => {
return <OrderItem value={value} myKey={key}/>
})
}
</tbody>
</table>
)
}
}
class OrderItem extends React.Component {
render() {
return (
<div> // <-- problematic div
<tr key={this.props.myKey}>
<td> Table {this.props.value[0].table}</td>
<td> Item </td>
<td> Option </td>
</tr>
{this.props.value.map((item, index) => {
if (index > 0) { // skip the first element since it's already used above
return (
<tr key={this.props.myKey …我收到这个警告:
警告:数组或迭代器中的每个子节点都应该具有唯一的"键"支柱.检查EventsTable的render方法.有关更多信息,请参见fb.me/react-warning-keys.
react-runtime-dev.js？8fefd85d334323f8baa58410bac59b2a7f426ea7:21998警告:数组或迭代器中的每个子节点都应该有一个唯一的"key"prop.检查Event的render方法.有关更多信息,请参见fb.me/react-warning-keys.
这是EventsTable:
EventsTable = React.createClass({
displayName: 'EventsTable',
render() {
console.dir(this.props.list);
return (
<table className="events-table">
<thead>
<tr>
{_.keys(this.props.list[0]).map(function (key) {
if (key !== 'attributes') {
return <th>{key}</th>;
}
})}
</tr>
</thead>
<tbody>
{this.props.list.map(function (row) {
return (
<Event key={row.WhatId} data={row} />
);
})}
</tbody>
</table>
)
}
});
这是Event:
Event = React.createClass({
displayName: 'Event',
render() {
return (
<tr>
{_.keys(this.props.data).map((x) => {
if (x !== 'attributes')
return <td>{this.props.data[x]}</td>;
})} …我有一个父组件，它根据通过 props 接收到的数组呈现一组子组件。
import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import { Content } from 'components-lib';
import Child from '../Child';
const Parent = props => {
const { items } = props;
return (
<Content layout='vflex' padding='s'>
{items.map(parameter => (
<Child parameter={parameter} key={shortid.generate()} />
))}
</Content>
);
};
Parent.propTypes = {
items: PropTypes.array
};
export default Parent;
每次item添加一个新的，所有的孩子都被重新渲染，我试图避免这种情况，我不希望其他孩子被重新渲染，我只想渲染添加的最后一个。
所以我在孩子身上尝试了 React.memo，我可能会通过code属性或其他东西进行比较。问题是等式函数永远不会被调用。
import React from 'react';
import PropTypes from 'prop-types';
import { Content …我想了解如果我不在动态添加的组件中使用键会发生什么.我删除了密钥,它没有任何问题呈现,只是发出关于密钥使用的警告消息.如果我们不使用密钥,有人会举例说明后果是什么吗？
提供的答案没有给我提示我的案例有什么问题。所以我在控制台中收到以下错误：
react-jsx-dev-runtime.development.js?bfcc:117 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Feed`. See https://reactjs.org/link/warning-keys for more information.
这是我在返回语句中的代码：
return (
<>
<Header></Header>
<div className={hfstyles.feed} style={{ 'maxWidth': '980px;', 'textAlign': 'center', 'margin': '0 auto', 'padding': '5em 0' }}>
{feed.map((post, index) => {
const postBefore = index == 0 ? new Date() : feed[index - 1].createdAt;
return randomIndex == index ? (
<>
<PostBasic
post={post}
postBefore={postBefore}
key={post.id}
/>
<RandomMessage/>
</>)
:
(<PostBasic
post={post}
postBefore={postBefore}
key={post.id} …我认为这是一个非常愚蠢的怀疑,但我陷入了困境.我有多个单选按钮,我想在我点击另一个单选按钮后取消选中所有单选按钮.如何在反应中实现它？
var options = [{id:1,nm:"Appointment fixed"},{id:2,nm:"Call later"},{id:3,nm:"Wrong number"},{id:4,nm:"Don't call again"},{id:5,nm:"Call later"}];
{options.map((item,i) => {
return (
<div onChange={(i)=>this.callOptions(i)}>
<label className="radio-inline"><input type="radio" value={i} ref={'ref_' + i} value={item.id}/>{item.nm}</label>
</div>
)
})}
reactjs ×9
javascript ×5
dart ×1
facebook ×1
flutter ×1
html ×1
listview ×1
next.js ×1
radio-button ×1
react-native ×1