Meteor/React:如何在主模板中集成 react 组件

这是我的搜索页面在我的meteor应用程序中的样子：

/client/main.html

<head>
  <title>Search</title>
</head>
<body>
    <div class="ui icon input">
        <input type="text" placeholder="Search...">
        <i class="circular search link icon"></i>
    </div>
</body>

我是反应的新手，我想使用 react 进行这个简单的搜索。

imports/ui/search.jsx

import React, { Component } from 'react';
export default class Search extends Component {
  render() {
    return (
      <div class="ui icon input">
        <input type="text" placeholder="Search...">
        <i class="circular search link icon"></i>
      </div>
    );
  }
}

但是我必须如何使用它来正确反应呢？如何在主模板中使用该组件？如何设置这个以屏幕为中心的输入字段？

你最好先检查文档和示例。

这是回答您问题的示例。

HTML 只包含空的 container 元素。

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

App组件是主要组件。您可以使用类似 Router .

class App extends React.Component {
  render() {
    return (
      <div>
        <Search />
      </div>
    );
  }
}

Search您创建的组件。在上面，你可以看到Search组件在 React 中是这样使用的。

关于样式，你可以直接将样式对象传递给组件或制作一个css文件。

class Search extends React.Component {
  render() {
    return (
      <div class="ui icon input" style={searchContainerStyle}>
        <input type="text" style={searchInputStyle} placeholder="Search..." />
        <i class="circular search link icon"></i>
      </div>
    );
  }
}
const searchContainerStyle = {
  width: '50%',
  margin: '0 auto'
}
const searchInputStyle = {
  width: '100%'
}

最后，在container元素下呈现App。

React.render(<App />, document.getElementById('container'));

相关内容

最新更新

热门标签：