is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

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中引入组件即可

猜你喜欢

转载自blog.csdn.net/xiaoguoyangguang/article/details/108189155