Question

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

/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>

我是全新的反应，我想对这个简单的搜索使用反应。

/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>
    );
  }
}

但我如何使用它做出正确反应？如何在主模板中使用该组件？如何将此输入字段设置在屏幕中心？

Answer 1

您最好首先查看文档和示例。

Here就是回答你问题的一个例子。

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组件。在上面，您可以看到在{React。中使用Search组件。

关于样式，您可以直接将样式对象传递给组件或制作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%'
}

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

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

Meteor / React：如何在主模板中集成反应组件

1 个答案: