分离代码时无法从组件读取属性

Question

我想将以下代码分离成一个组件文件并导入并使用它（例如<ModsListing/>）。

然而，将我的代码放入组件文件并导入并使用它，我得到了 "not defined" 错误。

         {this.props.mods.map(Mod => // Get our mods & loop over them
             <li style={{paddingBottom:'4pt'}} className="list-group-item" key={Mod.id}>
             <Link prefetch href={`/mods/${Mod.id}`}><a>


            {Mod.name}</a></Link>
            {Mod.description}

             </li>

         )}
         </ul>

这是我要将其拆分成的组件文件

从 'react'

导入 React

         {this.props.mods.map(Mod => // Get our mods & loop over them
        <li style={{paddingBottom:'4pt'}} className="list-group-item" key={Mod.id}>
         <Link prefetch href={`/mods/${Mod.id}`}><a>


         {Mod.name}</a></Link>
         {Mod.description}

         </li>

         )}
         </ul>

);

导出默认 ModListing；

Answer 1

你可以这样试试

import React from 'react'

    {this.props.mods&&this.props.mods.map(Mod => // Get our mods & loop over them
   <li style={{paddingBottom:'4pt'}} className="list-group-item" key={Mod.id}>
    <Link prefetch href={`/mods/${Mod.id}`}><a>


    {Mod.name}</a></Link>
    {Mod.description}

    </li>

    )}

);

导出默认 ModListing；

分离代码时无法从组件读取属性

Cannot read property from component when separating out code

reactjs

react-props

react-component

分离代码时无法从组件读取 属性

Cannot read property from component when separating out code

reactjs

react-props

react-component

分离代码时无法从组件读取属性