Question

如何在我的应用中呈现React组件？

我在head部分添加了这3行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>

然后我的component：

<script type="text/jsx" src="/js/test-react.js"></script>

在body部分，我阻止了以下id：

<div id="react-test"></div>

这是我的react component：

const el = document.getElementById("react-test");

const arr = [
  'One1',
  'One2',
  'One3',
  'One4',
  'One5',
]

class TestReactComponent extends React.Component {
  constructor(porps) {
    super(props)

    this.state = {
      isReady: true
    }
  }

  render() {
    return (
      <ul>
        {arr.map((item, i) => {
          return (
            <li>
              <a href="#">{item}</a>
            </li>
          )
        })}
      </ul<
    )
  }
}

ReactDOM.render(<TestReactComponent/>, el);

我的控制台没有错误，但它什么也没做。 id react-test的阻止为空。

Answer 1

ul结束标记不正确。

如何在常规网站中呈现React组件

1 个答案: