如何为状态数组中的每个项目添加 React JSX？

Posted 2023-02-19

【中文标题】如何为状态数组中的每个项目添加 React JSX？

【英文标题】：How to add React JSX for every item in state array?

【发布时间】：2022-01-21 17:50:15

【问题描述】：

我是 React 状态的新手。我已经学习了道具，现在正在学习状态。我现在有点困惑。我正在创建一个网络应用程序，您可以在其中将代码 sn-ps 存储在有组织的地方。在不使用状态的情况下，我能够使用数组为 sn-ps 创建虚拟数据。它看起来像这样：（注意 sn-ps 数组，然后查看 JSX 代码中的 runCallBack() 内部，看看我当前如何通过虚拟数据显示 sn-ps。runCallBack() 是我运行 JS 代码的方式在我的 JSX 代码中。

export class Content extends React.Component 
    render() 
        const runCallback = (cb) => 
            return cb();
            

        const collections = [
            title: 'ReactJS', color: 'red',
            title: 'html', color: 'cyan',
            title: 'CSS', color: 'pink'
        ]

        const snippets = [
            title: 'Generate ReactJS component', date: new Date(), code: "<code>Code goes here</code>", language: 'javascript', collection: collections[0],
            title: 'CSS Grow on hover', date: new Date(), code: "<code>Other code goes here</code>", language: 'css', collection: collections[2]
        ]


        return (
            <div className="content">
                <h1 className="content-header">Snippets</h1>
                <div className="w-layout-grid grid">
                    
                        runCallback(function() 
                            const row = [];
                            for (var i = 0; i < snippets.length; i++) 
                                row.push(<Snippet title=snippets[i].title code=snippets[i].code date=snippets[i].date language=snippets[i].language collection=snippets[i].collection/>) 
                            
                            return row;
                        )
                    
                    
                </div>
            </div>
        )
    

好吧，现在我正在尝试将 sn-ps 存储在状态中。当我运行我的代码时，页面上没有显示任何内容。它使所有组件消失，因此显然它不起作用。但这里是非工作代码：

export class Content extends React.Component 
    constructor(props) 
        super(props)
        const collections = [
            title: 'ReactJS', color: 'red',
            title: 'HTML', color: 'cyan',
            title: 'CSS', color: 'pink'
        ]
        this.state = 
            snippets: [
                title: 'Generate ReactJS component', date: new Date(), code: "<code>Code goes here</code>", language: 'javascript', collection: collections[0],
                title: 'CSS Grow on hover', date: new Date(), code: "<code>Other code goes here</code>", language: 'css', collection: collections[2]  
            ]
        
    
    render() 
        const runCallback = (cb) => 
            return cb();
            

        return (
            <div className="content">
                <h1 className="content-header">Snippets</h1>
                <div className="w-layout-grid grid">
                    
                        runCallback(function() 
                            const row = []
                            const snippets = this.state.snippets
                            for (var i = 0; i < snippets.length; i++) 
                                row.push(<Snippet title=snippets[i].title code=snippets[i].code date=snippets[i].date language=snippets[i].language collection=snippets[i].collection/>) 
                            
                            return row;
                        )
                    
                    
                </div>
            </div>
        )
    

export default Content

对不起，如果这是一个愚蠢的问题，但我现在才学习状态。我能够成功地在其他情况下使用状态，但不是这种情况。我也听说过 Redux 并使用它来存储状态数据，但我一次只学习一件事。

【参考方案1】：

问题是您试图在function 中访问this。在这种情况下，this 将是函数，而不是组件。因此，您将无法访问state。

尝试使用箭头函数。您只需将 runCallback(function() 替换为 runCallback(() => 即可完成此操作

【讨论】：

我已经找到了答案，但我还有一个问题。即使我使用箭头函数，我似乎也无法使用 runCallback() 执行此操作。什么都没有显示。这是代码：pastebin.com/2pqhaWhm。我知道我在pastebin.com/CAgrq83d 找到了解决方案，但对于其他场景，我可能想使用runCallback。为什么它不起作用？

【参考方案2】：

您应该使用“runCallback”内部的箭头。 常规函数覆盖有自己的根“this”，而箭头函数没有。

也许查看这篇文章了解更多信息 - https://levelup.gitconnected.com/arrow-function-vs-regular-function-in-javascript-b6337fb87032

【讨论】：

嗯，这是件好事，我现在意识到这就是我不能使用“this.state.sn-ps”的原因。但我有一个问题，一般来说，箭头函数对于我创建的每个函数都是好的做法吗？

我已经找到了答案，但我还有一个问题。即使我使用箭头函数，我似乎也无法使用 runCallback() 执行此操作。什么都没有显示。这是代码：pastebin.com/2pqhaWhm。我知道我在 pastebin.com/CAgrq83d 找到了解决方案，但对于其他场景，我可能想使用 runCallback。为什么它不起作用？ ——

【参考方案3】：

只需在状态数组上使用 .map 方法生成 JSX，而不是回调函数。

this.state.snippets.map((snippet) => 
   return (<JSX>...</JSX>)
)

【讨论】：

我应该把这段代码放在哪里？在大括号之间的 JSX 内部，还是在 render() 内部的 JSX 外部？

内弯手链，内渲染函数

没问题 - 为了进一步解释，可以在数组上使用 map 函数将数组中的元素转换为其他内容。您可以将其用于此目的，将数组中的元素转换为 JSX 表示，或者如果您愿意，可以使用它将元素更改为不同类型的项目。有很多方法可以解决它。