用于组件的React动态模板
用于组件的React动态模板
提问于 2018-01-19 23:07:08
考虑以下组件：ItemsDisplay具有业务逻辑，而List和Table只是具有相同接口的可视化。
class ItemsDisplay extends Component {
componentDidMount() {
fetch().then(items => this.setState({ items }))
}
remove(item) {
// remove item from state
}
render() {
return this.props.children
}
}const List = ({ items, onRemove }) => (
<ul>
{items.map(item => <li onClick="onRemove()">{item}</li>)}
</ul>
)const Table = ({ items, onRemove }) => (
<table>
{items.map(item => (
<tr onClick="onRemove()">
<td>{item}</td>
</tr>
))}
</table>
)如何将ItemsDisplay与我的两个不同的可视化效果一起使用？有没有这样的模式？或者我需要创建一个ItemsDisplayList和另一个ItemsDisplayTable？
<ItemsDisplay>
<List items="items from ItemsDisplay" onRemove="remove rom ItemsDisplay" />
</ItemsDisplay>
<ItemsDisplay>
<Table items="items from ItemsDisplay" onRemove="remove rom ItemsDisplay" />
</ItemsDisplay>Stack Overflow用户
发布于 2018-01-20 00:25:15
const ItemDisplayList = ({ items, onRemove, list}) => {
if(list) {
return(
<ul>
{items.map(item => <li onClick="onRemove()">{item}</li>)}
</ul>);
} else {
return(
<table>
{items.map(item => (
<tr onClick="onRemove()">
<td>{item}</td>
</tr>
))}
</table>);
}
}然后：
<ItemsDisplay>
<ItemDsplayList list={true} items="items from ItemsDisplay" onRemove="remove rom ItemsDisplay" />
</ItemsDisplay>或
<ItemsDisplay>
<ItemDsplayList list={false} items="items from ItemsDisplay" onRemove="remove rom ItemsDisplay" />
</ItemsDisplay>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48344030
复制相关文章
相似问题
腾讯云开发者
