Question

我在名为ts.js的文件中有一个react组件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


export default class Ts extends React.Component {
    constructor(props) {
       super(props);
       var expected = {
            lowercase:'Onlylowercase',
            snakeCase:'justSnakeCase',
            ProperCase: 'AndProperCase'
        };
        console.log("expected:",expected);
        console.log("props:",props);
        console.log("this.props",this.props);
        console.log("props.lowercase",props.lowercase);
        this.state={'lowercase':this.props.lowercase};

    };

    render() {
        return NULL;
    }

}
if (document.getElementById('ts')) {
    ReactDOM.render(<Ts />, document.getElementById('ts'));
}

我还有一个名为html的页面：

<html>
    <head>
        <title>My TS</title>
    </head>
    <body>
          <Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
          </Ts>
      <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

我的问题是我无法获得小写的值=＆＃34; onlylowercase＆＃34; ID =＆＃34; TS＆＃34; snakeCase =＆＃34; justSnakeCase＆＃34; ProperCase =＆＃34; AndProperCase＆＃34;在构造函数中被识别为props。我需要从html传递一些东西来填充组件的初始状态。

当我打开Chrome控制台打开HTML时，我得到：

expected: {lowercase: "Onlylowercase", snakeCase: "justSnakeCase", ProperCase: "AndProperCase"}
props: {}
  __proto__: Object

or it is this.props?: {}
  __proto__: Object

props.lowercase undefined
this.props.lowercase undefined
undefined
undefined

我期望道具是一个javascript对象，其属性为小写，snakeCase和ProperCase，就像var预期的那样。

我认为我不需要使用componentWillReceiveProps - 因为我试图遵循文档中描述的模式： https://reactjs.org/docs/react-component.html#constructor 并将props作为html属性传递，如下所述： https://reactjs.org/docs/components-and-props.html

我已经从这篇文章中排除了节点模块和javascript包含的细节 - 正在调用Ts组件的构造函数，这表明Ts类是＆＃34;那里＆＃34;我的npm配置没问题 - 它包括反应和其他必需的模块。 {{asset（）}}函数是Laravel函数。 html是Laravel应用程序中刀片模板的一部分。

任何人都可以看到我做错了什么吗？

Answer 1

你的语法错了。 React不会创建像“”这样的新html标签。您只能在反应组件中使用标签。所以正确的语法是在html替换

<Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
          </Ts>

致<div id="ts"></div> 之前添加到

<script>
   var lowercase="whatever";
   var snakeCase="snakeCase";
   ...
</script>

并改为

if (document.getElementById('ts')) {
    ReactDOM.render(<Ts lowercase={lowercase} snakeCase={snakeCase} />, document.getElementById('ts'));
}

ReactDOM会找到一个id为“ts”的dom，并用你的ts组件替换它。

反应没有收到来自HTML的道具

1 个答案: