Question

我需要创建一个组件以进行如下渲染：

>>> a[row, col] = 0
>>> a
array([[ 0,  0,  2,  3],
       [ 4,  5,  0,  7],
       [ 0,  9, 10, 11]])

它将接收以下数据：

标题-字符串
contentA -大字符串（段落），可能包含链接（a href）
contentB -大字符串或复杂的HTML代码

以下是我发现的以下方法。但是，我不确定React推荐哪种方法。

方法1

<div class="row">
    <div class="col">
        <div class="some another class">
            <h3>{{title}}</title>
        </div>
    </div>
    <div class="col">
        <p>{{contentA}}</p>
    </div>
    <div class="row">
        <div class="some wrapper">
            <p>{{contentB}}</p>
        <div>
    </div>
<div>

优点：可以在组件的不同部分轻松访问不同的道具

缺点：如果内容为大HTML内容，则处理太复杂

方法2

<Component title="a" contentA="some large content" contentB="another large content"/>

优点：代码简单得多

缺点：需要过滤<Component> <title>a</title <content>some large content</content> <content>another large content</content> </Component>并找到每个要放置在组件中正确位置的元素

Answer 1

反应都是关于创建颗粒状组件的，组件树越精细，您执行的方式就越反应。

您说您得到了3种内容：文本， contentA 和 ContentB

标题：它已经很详细了。

内容A：您说的是“ 大字符串（段落），可能包含容器链接（a href） ” ，如果它的一个段落是细粒度的，但是如果它是一个段落的集合，那么我认为您应该将其带到另一个组件中。 例如：ContentA组件

内容B：显然，这是一个复杂的HTML代码，这就是React的目的，您需要将此复杂的HTML代码分解为细粒度的组件，这将使其更易于维护，并且也是React的最佳实践。

耐心地将其分解成几个部分，绝对是值得的。

希望有帮助。

Answer 2

这不是一个准确的说法：

缺点：如果内容为HTML内容，处理起来太复杂

如果值可以字符串形式保存在变量中，则可以将其用作传递到组件中的参数。如果您不希望尝试在prop值内转义引号，则建议您放弃<Component attr="someValue"/>语法，而改用<Component attr={'someValue'}/>。这使您可以将变量传递到道具中。这也允许您使用模板文字来传递值，如下所示：

<Component
    title="a"
    contentA={`
        <html>
            <head></head>
            <body>
                <p>Here is my super-big</p>
                <p>HTML-infused content</p>
                <p>I can even inject ${variables} in here!</p>
            </body>
        </html>
    `} 
    contentB="another large content"
/>

如果您觉得那样会使您的组件声明变得混乱，您可以改为在变量中设置这些值，然后将它们非常整洁地传递给组件，例如：

render() {
    const bigHtmlContent = (
        <html>
            <head></head>
            <body>
                <p>Here is my super-big</p>
                <p>HTML-infused content</p>
                <p>I can even inject {variables} in here!</p>
            </body>
        </html> 
    );
    return (
        <Component
            title="a"
            contentA={bigHtmlContent} 
            contentB="another large content"
        />  
    );
}

当然，如果更适合您，则可以将定义完全移出render()函数：

getBigHtmlContent() {
    return (
        <html>
            <head></head>
            <body>
                <p>Here is my super-big</p>
                <p>HTML-infused content</p>
                <p>I can even inject {variables} in here!</p>
            </body>
        </html>     
    );
}

render() {
    return (
        <Component
            title="a"
            contentA={() => this.getBigHtmlContent()} 
            contentB="another large content"
        />  
    );
}

在创建组件时，我倾向于将所有内容作为道具传递（如上例所示）。仅当我要创建一个高阶组件时才使用子级，根据设计，该组件应充当某些类型的子级的容器。

例如，在Material UI中，有一个<List>组件，需要一个或多个<ListItem>。在那种情况下，我认为通过<ListItems>作为道具没有太大意义。它们是<List>组件的子元素（应该是）。

道具与孩子在ReactJS中传递HTML内容

方法1

方法2

2 个答案: