[英]using map won't render any JSX content react
我有一个问题,我试图从数据列表中生成动态复选框元素,但屏幕上没有出现任何复选框,但控制台中没有可见的错误。 我正在遵循我在不同组件中使用的模式来呈现 jsx,所以我必须有一个错字,但我很难过。
主要组件 SearchPage.js:
const renderSettingsView = (data) => {
if (settingsViewVisible) {
return (
<SettingsView data={data} />
)
} else {
return null;
}
}
const toggleSettingsView = () => {
setSettingsViewVisible(!settingsViewVisible);
}
const toggleMainInfo = (e) => {
// setShowMainInfo(!showMainInfo);
setShowMainInfo(e.target.checked, () => {
alert(showMainInfo)
})
}
const SETTINGS_DATA = [
{
label: 'Main info',
id: 'main_info',
callback: toggleMainInfo
}
]
return (
<div className="ui container" style={{marginTop: '10px'}}>
<SearchBar term={term} onTermUpdate={onTermUpdate} />
{renderRecentSearches()}
<br/><br/>
<button onClick={toggleSettingsView}>Settings</button>
{renderSettingsView(SETTINGS_DATA)}
<div className="ui segment">
{renderMainContent()}
</div>
</div>
)
包括注释掉的两种尝试都没有在屏幕 SettingsView.js 上显示任何复选框:
import React from 'react';
import SettingsCheckbox from './SettingsCheckbox';
const SettingsView = ({data}) => {
// const renderCheckboxes = () => {
// return data.map((checkbox_info) => {
// <SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
// });
// }
const checkboxes = data.map((checkbox_info) => {
<SettingsCheckbox id="main_info" label="Main info" callback={checkbox_info.callback}/>
});
return (
<div className="ui segment">
settings
{checkboxes}
</div>
);
}
export default SettingsView;
SettingsCheckbox.js:
import React from 'react';
const SettingsCheckbox = ({id, label, callback}) => {
return (
<div style={{width: '200px'}}>
<input
type="checkbox"
id={id}
name={id}
value={id}
onChange={callback()} />
<label for="main_info">{label}</label><br/>
</div>
);
}
export default SettingsCheckbox;
如何在对象的数据列表上 map 并根据数据呈现复选框?
我已经尝试了您的 SettingsView.js 代码片段,但发现了一个小问题。 您需要执行如下所示的隐式返回。
尝试使用此代码,
const checkboxes = data.map((checkbox_info) => (
<SettingsCheckbox id="main_info" label="Main info"
callback= {checkbox_info.callback}/>
));
return (
<div className="ui segment">
settings
{checkboxes}
</div>
);
请注意,我已将data.map((checkbox_info) => {<SettingsCheckbox />})
更改为data.map((checkbox_info) => (<SettingsCheckbox />))
并使用()
而不是{}
但是,如果您更喜欢显式方式,请尝试使用如下的 return 语句。
const checkboxes = data.map((checkbox_info) => {
return (
<SettingsCheckbox id="main_info" label="Main info"
callback= {checkbox_info.callback}/>
)
});
return (
<div className="ui segment">
settings
{checkboxes}
</div>
);
两种方式都很好用...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.