Question

似乎这是React中一个非常流行的语法，利用了ES6隐式返回和诸如此类的东西：

const TableRow = ({ product, deleteProduct }) => (
    <tr>
    {   
        Object.keys(product).map( (key) => (                                                          
                    <td key={tdKeys++}>{product[key]}</td>                                            
                    ))                                                                                
    }                                                                                                 
    <td>
        <button className="productsTable__deleteButton"                                               
            onClick={() => deleteProduct(product.id)}>                                                
            Delete                                                                                    
        </button>                                                                                     
    </td>                                                                                             
</tr>
)

虽然让我有点讨厌，但似乎无法调试。有没有办法调试这个组件的道具，而不修改这个隐式返回？

我可以将这些括号的内容移动到return语句中，插入一些花括号，然后输入调试器或控制台日志语句，但这让我感到难过。还有替代品吗？（如果应用程序在这里崩溃）。

Answer 1

除了添加功能块之外，看起来没有太多选择。我在这里找到了一个有趣的答案：es6 arrow functions debugger statement

因为调试器是一个语句，所以在表达式的任何地方使用它预期是语法错误。你可以解决这个问题是在您的表达式中转换调试器语句将JavaScript引入评估但不返回，例如：

function debug(args) {
     debugger;
     return true;
}

params => debug() && params + 1

// or

params => console.log(params) || params + 1

基本上： params => console.log(params) || params + 1可以快速解决。

使用隐式返回调试功能反应组件

1 个答案: