react 无状态组件传递参数

Question

父组件：

this.state = {

    items: ['beijing', 'shanghai']

}

<div>

    <List items={this.state.items}

</div>

const List = (items) => (

<div>

    <ul>

        {items.map(item => <li key={item}>{item}</li>}

    </ul>

</div>

)

会报错items.map is not function,这是什么原因？

class List extends Component {

render() {

    return (

        <div>

            <ul>

                {this.props.items.map(item => <li key={item}>{item}</li>)}

            </ul>

        </div>

    )

}

}

这样写就不会报错

Answer 1

使用函数参数结构const List = ({items}) => (<div>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; {items.map(item => <li key={item}>{item}</li>}&nbsp; &nbsp; </ul></div>)