react的子组件中:
class todoListUI extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div style={
{
margin: '15px' }}>
<Input
placeholder={
this.props.InputValue}
style={
{
width: '250px', marginRight: '15px' }}
onChange={
this.props.changeInputValue} />
<Button onClick={
this.addItem} type="primary">增加</Button>
<div style={
{
width: '300px', margin: '10px' }}>
<List bordered
dataSource={
this.state.data}
renderItem={
(item, index) => (<List.Item onClick={
(index) => {
this.props.deleteItem(index) }}>{
item}</List.Item>)} />
</div>
</div>
);
}
}
react的父组件中:
import todoListUI from './todoListUI'
...
render() {
return (<todoListUI InputValue={
this.state.InputValue} changeInputValue={
this.changeInputValue} addItem = {
this.addItem} deleteItem={
this.deleteItem} />);
}
报错原因:子组件在构造函数中与向外暴露时首字母一定要大写,父组件的render中引入组件即可