Question

我将这个示例代码放在一起，想知道为什么React会抛出错误。我试图解释这个问题作为使用React.Component后代的替代方法。

public static void main(String args[]) throws Exception
{
    ServerSocket s = new ServerSocket(8080);

    while (true) {
        Socket remote = s.accept();
        System.out.println("Connected");
        BufferedReader in = new BufferedReader(new InputStreamReader(remote.getInputStream()));
        PrintWriter out = new PrintWriter(remote.getOutputStream());

        String str = ".";

        while (!str.equals("")) {
            str = in.readLine();
            if (str.contains("GET")) {
                break;
            }
        }

        System.out.println(str);

        out.println("HTTP/1.0 200 OK");
        out.println("Content-Type: text/html");
        out.println("Access-Control-Allow-Origin: null");
        out.println("");
        out.flush();
    }
}

Answer 1

你想要做的事情根本不应该发挥作用。

您正尝试使用不受支持的方式创建React组件。创建适当的React组件的三种方法是：

class MyComponent extends React.Component { //class implementation
}
let MyComponent = React.createClass({ // class implementation
});
function MyCompent (props, context) { // component render method
}

基本上归结为：

声明一个扩展 React.Component 的类（第一种形式）。
从对象（第二种形式）创建一个类都返回某种＆＃34;构造函数＆＃34;对象。
实现渲染功能。

您将这些表单中的每一个都提供给React以更新和呈现组件树。

你所做的是尝试（我猜）使用 Object.assign 创建一个React.Component实例，然后将其传递给React进行渲染。

React不能以这种方式工作。相反，你给它一个＆＃34;构造函数＆＃34; （前2个表格）实现#render（）=＆gt; reactElement（一个返回React Elements而不是Components的方法）或者你传递一个也返回React Elements的函数。

PS：要在不使用 new 的情况下创建类的实例，Es5引入了 Object.create ：

var o = Object.create(proto); // o.__proto__ === proto
// the returned object has the supplied arguments as prototype.

Answer 2

您正在寻找的是遗留（ES6之前的）语法：

{if ($display_qties == 1 OR $product->quantity <= $last_qties && !$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && $product->available_for_order)}
            <!-- number of item in stock -->
            <p id="pQuantityAvailable"{if $product->quantity <= 0} style="display: none;"{/if}>
                <span id="quantityAvailable">{$product->quantity|intval}</span>
                <span {if $product->quantity > 1} style="display: none;"{/if} id="quantityAvailableTxt">{l s='Item'}</span>
                <span {if $product->quantity == 1} style="display: none;"{/if} id="quantityAvailableTxtMultiple">{l s='Items'}</span>
            </p>
        {/if}
        {if $PS_STOCK_MANAGEMENT}
            <!-- availability -->
            <p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 OR !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
                {<span id="availability_label">{l s='Availability:'}</span>}
                <span id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>{if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}</span>
            </p>
            {hook h="displayProductDeliveryTime" product=$product}
            <p class="warning_inline" id="last_quantities"{if ($product->quantity > $last_qties || $product->quantity <= 0) || $allow_oosp || !$product->available_for_order || $PS_CATALOG_MODE} {/if} >{l s='Warning: Last items in stock!'}</p>
        {/if}
        <p id="availability_date"{if ($product->quantity > 0) || !$product->available_for_order || $PS_CATALOG_MODE || !isset($product->available_date) || $product->available_date < $smarty.now|date_format:'%Y-%m-%d'} {/if}>
            <span id="availability_date_label">{l s='Availability date:'}</span>
            <span id="availability_date_value">{dateFormat date=$product->available_date full=false}</span>
        </p>
        <!-- Out of stock hook -->
        <div id="oosHook"{if $product->quantity > 0}{/if}>
            {$HOOK_PRODUCT_OOS}
        </div>

更多信息可在documentation on using React without ES6。

中找到

Answer 3

以下工作没有createClass或extends

const Example = (props, context) => Object.assign(
  {},
  Object.create(React.Component.prototype),
  {
    props, context,
    state: {text: 'acutally'},
    render () {
      return (
        <span>This {this.state.text} works</span>
      );
    }
  }
)

将Object.assign与React.Component一起使用

3 个答案: