Question

我需要在我正在构建的网站中找到多次重复使用的列表组件。但是，该列表纯粹用于呈现，并且根本不对应用程序的状态负责。我知道你要么不能，要么不应该有含有任何逻辑的哑组件，但我不知道如何不使用智能组件，这是完全没必要的。这是我的智能组件：

Array(
     [0] => <div>
     [1] => </div>
     [2] => <a href="test/test.com">
     [3] => </a>
)

我试过这个：

class Menu extends Component {
    renderItems(items) {
        return this.props.items.map((i, index) => {
             return (
                 <li key={index} style={{marginLeft: 10}}>
                    {i}
                </li>
            )
        });
    }
    render() {
        const { listStyle } = styles;
        return (
            <div>
                <ul style={listStyle}>
                    {this.renderItems()}
                </ul>
            </div>
        )
    }
}

然后像这样在Nav中调用它，它不会抛出错误，但也不会从菜单中呈现任何内容：

function Menu(props) {
    return props.items.map((i, index) => {
             <li key={index} style={{marginLeft: 10}}>
                {i}
            </li>
    });
}

另外，值得注意的是，我从未遇到过应该像组件一样呈现的函数，但是基于this page

上的示例尝试了它

Answer 1

这是一个类似于你正在进行的回答

function Menu(props) {
    this.renderItems = () => {
        return (
            <ul>
                {props.items.map((i, index) => {
                   return (
                       <li>{i}</li>
                   )
                })}
            </ul
        )
    }

    return(
        this.renderItems()
    )
}

Answer 2

我们走了：

function Menu(props) {
    const {listStyle} = styles;
    const listItems = props.items.map((i, index) =>
                <li key={index} style={{marginLeft: 10}}>
                    {i}
                </li>
        );
    return (
        <ul style={listStyle}>{listItems}</ul>
    );
}

在React组件中调用外部函数

2 个答案: