Javascript 呈现搜索数据时的未捕获不变冲突

我正在尝试使用React实现搜索。我的逻辑流程有两个问题：

• 将输入设置为参数
• 渲染从服务器获取的数据

当我玩它时，我遇到了错误消息

未捕获不变冲突输入是无效元素标记，不能 有

孩子

或使用

道具。危险的西丁神经HTML

这是我的代码：

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Home.scss';
import AWS from 'aws-sdk';

var GetTech = React.createClass({
  render: function() {
    var createItem = function(item) {
      var csd = new AWS.CloudSearchDomain({
        endpoint: 'mycloudsearch.amazonaws.com',
        region: 'us-east-1'
      });
      var params = {
        query: {this.state.text}
      }
      csd.search(params, function (err, data) {
        if (err) console.log(err, err.stack);
        else {
          console.log(JSON.stringify(data));
        }
      });
    }
    return (
      {this.props.items.map(crateItem)}
    )
  }
});

var FilteredTechs = React.createClass({
  getInitialState: function() {
    return {
      text: '',
      items: []
    };
  },
  handleChange: function(event) {
    console.log(event);
    this.setState({
      text: event.target.value
    });
  },
  handleSearch: function(event) {
    event.preventDefault();
    this.setState({
      items: this.props.items,
      text: ''
    });
  },
  render: function() {
    return (
      <div>
        <form onSubmit={this.handleSearch}>
          <input
            type="text"
            value={this.state.text}
            onChange={this.handleChange}
          />
          <input type="button">Search</input>
        </form>
        <GetTech items={this.state.items} />
      </div>
    );
  }
});


function Home({ techs }) {
  <FilteredTechs />
}

Home.propTypes = {
  techs: PropTypes.arrayOf(PropTypes.shape({
  })).isRequired,
};

export default withStyles(Home, s);

import React，{PropTypes}来自'React'；
从“同构样式加载程序/lib/withStyles”导入withStyles；
从“/Home.scss”导入s；
从“AWS sdk”导入AWS；
var GetTech=React.createClass({
render:function（）{
var createItem=函数（项）{
var csd=new AWS.CloudSearchDomain({
端点：“mycloudsearch.amazonaws.com”，
地区：'us-east-1'
});
变量参数={
查询：{this.state.text}
}
csd.search（参数、函数（错误、数据）{
if（err）console.log（err，err.stack）；
否则{
log（JSON.stringify（data））；
}
});
}
返回(
{this.props.items.map（crateItem）}
)
}
});
var FilteredTechs=React.createClass({
getInitialState:函数（）{
返回{
文本：“”，
项目：[]
};
},
handleChange:函数（事件）{
console.log（事件）；
这是我的国家({
文本：event.target.value
});
},
handleSearch：功能（事件）{
event.preventDefault（）；
这是我的国家({
项目：this.props.items，
文本：“”
});
},
render:function（）{
返回(
搜寻
);
}
});
函数主页（{techs}）{
}
Home.propTypes={
技术：PropTypes.arrayOf（PropTypes.shape({
})).要求，
};
使用样式导出默认值（Home，s）；

---

我是新来的。请告诉我，因为你希望和你的提示和意见非常感谢。非常感谢

错误非常清楚：

输入

s必须是无效元素；也就是说，它们必须是自动关闭的

此语法无效：

Search

您需要：

---

或者：

Search

输入是自动关闭标记，但在某些情况下，您可以使用

您可以安装reactstrap软件包，然后导入并使用

标记，而不是使用

。 此外，您还可以查看以下链接：

---

此外，您还可以检查输入类型：

您应该提出新问题，而不是更改问题。此外，您还可以检查输入类型：