Question

我有一个无状态组件，将来会组合两个Option无状态组件：

const Grouped = () => {
    const options = [
        {
            header: "Create new Lamborghini",
            body:   "Generate a new Lamborghini",
            button: "Generate"
        },

        {
            header: "Get Lamborghini",
            body:   "Getz it",
            button: "Get it"
        }
    ];

    return (
    <div>
        <Option {...options[0]} />
    </div>);
};

export default HomeOptionsGrouped;

选项如下所示：

const Option = ({header, body, button}) => (
    <div className="option-container">
        <img className="option-modal" src={OptionModal} alt="Option Modal"/>
        <h5>{header}</h5>
        <p className="option-body">{body}</p>
        <p className="option-button">{button}</p>
    </div>
);

export default Option;

我遇到的问题是我想要在新单词后面的换行标题说，并且一个接一个的单词。但是当我添加＆＃39; \ n＆＃39;对于Grouped组件中的字符串，我仍然在一行中获取所有内容。我不想设置innerHTML并传递字符串。解决方法是什么？

Answer 1

只需将fig, ax = plt.subplots() ax = fig.add_subplot(111) x = 0 y = 0 circle = plt.Circle((x, y), radius=1) ax.add_patch(circle) label = ax.annotate("cpicpi", xy=(x, y), fontsize=30, ha="center") ax.axis('off') ax.set_aspect('equal') ax.autoscale_view() plt.show()更改为React元素，因为您可以将它们嵌套在header和<h5>中：

<p>

Answer 2

作为字符串，您的标题值应如下所示：

<span>Create new<br />Lamborghini</span>

如果您希望获得相同的效果，

同样适用于身体价值。

在将道具传递给React的无状态组件时，断行字符串

2 个答案: