谢谢！

Question

我正在学习如何通过名为＆＃39;现代网络应用程序与React和Redux＆＃39;的Net tuts系列使用Reactjs。现在我们只是涵盖了反应组件的基础知识，但是，无论出于何种原因，我永远不能从纯函数返回jsx，使用类或任何其他创建在线我发现的组件的方法。

看来我已经尝试了很多不同的创建组件的方法，我的猜测是错误存在于我使用watchify和babelify的方式中。

这是我得到的错误：

// Adding a custom fee to cart based on a product custom field value calculation
add_action('woocommerce_cart_calculate_fees', 'ba_custom_cart_fee');
function ba_custom_cart_fee( $cart_object ){

    // Initializing variables
    $fee = 0;

    // Iterating through each cart items
    foreach( $cart_object->get_cart() as $cart_item ){

        $item_id = $cart_item['product_id']; // Item Id or product ID
        $item_qty = $cart_item['quantity']; // Item Quantity

        // Getting the corresponding product custom field value
        $item_fee = get_post_meta($item_id, '_number_field', true);

        // Adding the calculation to the fee
        $fee += $item_qty *  $item_fee;
    }

    if ($fees != 0)
        $cart_object->add_fee( __('Handling fee', 'woocommerce'), $fee, true, 'standard');

}

我的index.html：

/home/michael/Documents/Web Dev/flaschard-app/src/app.js:33
return (<div className="app">
     ^
ParseError: Unexpected token

我的app.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
    <script src="bundle.js"></script>
</body>
</html>

和我的package.json：

const cards = (state, action) => {
    switch(action.type) {
        case 'ADD_CARD':
            let newCard = Object.assign({}, action.data, {
                score: 1,
                id: +new Date
            });

            return state.concat([newCard]);

        default:
            return state || [];
    };
};

const store = Redux.createStore(Redux.combineReducers({
    cards
}));

// store.subscribe(() => {
//  console.log(store.getState());
// });
//
// store.dispatch({
//  type: 'ADD_CARD',
//  data: {
//      front: 'front',
//      back: 'back'
//  }
// });

const App = (props) => {
    return (<div className="app">
        <h1>Hello React!</h1>
        </div>);
};

ReactDOM.render(<App />, document.getElementById('root'));

谢谢！

Answer 1

您的问题是watchify命令语法错误。您应该在命令中将方括号分开，就像在examples中一样，使babelify工作：

watchify src/app.js -o public/bundle.js -t [ babelify --presets [ react es2015 ] ]

Reactjs无法在纯功能组件中返回jsx＆＃39; ParseError：意外的令牌＆＃39;

谢谢！

1 个答案: