Итак, я заканчиваю задание на языке (Optimizely and React), который раньше никогда не использовал.
Как вы можете видеть ниже, у меня есть 2 разных оператора if, в зависимости от возвращаемого значения, возвращаемое значение в порядке. Я вижу, что это нормально при отладке, так что сторона Optimizely, похоже, работает. Кажется, происходит то, что основная функция завершается до того, как завершается .hen, вызывая ошибку:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Home`.
Так что мне нужно попытаться заставить операторы if выполняться до завершения функции.
Буду признателен за любую помощь, конечной целью для этого является 2-х битный код, работающий для 2 разных пользователей.
(function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(327);
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
//If original set to 874 if not then set to 884
var _enums = __webpack_require__(623);
var _enums2 = _interopRequireDefault(_enums);
var uuidv4 = __webpack_require__(676);
var user = { key: uuidv4() }
var _optimizely_manager = __webpack_require__(631);
var _optimizely_manager2 = _interopRequireDefault(_optimizely_manager);
_optimizely_manager2.default.getInstance().then(function (optimizelyInstance) {
const variation = optimizelyInstance.activate(_enums2.default.EXPERIMENT_KEYS.CAT_ABOVE_TITLE, user.key)
if(variation === _enums2.default.VARIATION_KEYS.ABOVE_TITLE_ORIGINAL){
var _item_list_item = __webpack_require__(874);
var _item_list_item2 = _interopRequireDefault(_item_list_item);
var ShoeListComponent = function (_React$Component) {
_inherits(ShoeListComponent, _React$Component);
function ShoeListComponent() {
_classCallCheck(this, ShoeListComponent);
return _possibleConstructorReturn(this, (ShoeListComponent.__proto__ || Object.getPrototypeOf(ShoeListComponent)).apply(this, arguments));
}
_createClass(ShoeListComponent, [{
key: 'render',
value: function render() {
var items = this.props.items;
return _react2.default.createElement(
'ul',
null,
Object.keys(items).map(function (itemId) {
return _react2.default.createElement(_item_list_item2.default, {
key: itemId,
item: items[itemId]
});
})
);
}
}]);
return ShoeListComponent;
}(_react2.default.Component);
exports.default = ShoeListComponent;
}
else if(variation === _enums2.default.VARIATION_KEYS.ABOVE_TITLE_VARIATION){
var _item_list_item = __webpack_require__(884);
var _item_list_item2 = _interopRequireDefault(_item_list_item);
var ShoeListComponent = function (_React$Component) {
_inherits(ShoeListComponent, _React$Component);
function ShoeListComponent() {
_classCallCheck(this, ShoeListComponent);
return _possibleConstructorReturn(this, (ShoeListComponent.__proto__ || Object.getPrototypeOf(ShoeListComponent)).apply(this, arguments));
}
_createClass(ShoeListComponent, [{
key: 'render',
value: function render() {
var items = this.props.items;
return _react2.default.createElement(
'ul',
null,
Object.keys(items).map(function (itemId) {
return _react2.default.createElement(_item_list_item2.default, {
key: itemId,
item: items[itemId]
});
})
);
}
}]);
return ShoeListComponent;
}(_react2.default.Component);
exports.default = ShoeListComponent;
}
});
}),
Это демонстрационное приложение, которое я использую.
https://github.com/optimizely/isomorphic-react-demo-app
Задача состоит в том, чтобы фактически изменить порядок представления. Таким образом, один человек увидит View A, а другой - View B, так что оператор if для 874 - это оригинальный код, а 884 - код, в котором я взял 874 и изменил его, чтобы они выглядели так, как они хотят. Я знаю, что выглядит правильно, как будто я делаю изменения в 874, это меняет представление на то, как я хочу. У меня просто проблема, что оба варианта могут быть возвращены.
Возможно, я даже лаю не на том дереве, как это сделать, но я предположил, что это было бы сделано.