我是否必须*扁平化React.JS中的所有层次化组件声明？

Question

我想知道在React中创建动态选择组件的规范方法是什么。我是否必须按照下面的代码创建一个返回选项的独立组件，以便能够通过支持为每个条目定制值，然后将它们包含到单独的select组件中？

class ListEntry extends React.Component {
  render = () => {
    return(
      <option value={this.props.ovalue}>{this.props.ovalue}</option>
    )
  }
}


class SomeList extends React.Component {
  genstuff = (n) => {
    var theEntries = [];
    for(var i = 0; i < n; i++) {
      theEntries.push(<ListEntry ovalue={Math.random().toString()} />)
    };
    return(theEntries)
  }

  render = () => {
    var entries = this.genstuff(10);
    return(
      <select>
        {entries}
        <ListEntry ovalue="a basic entry"/>
        <ListEntry ovalue="another"/>
      </select>
    )
  }
}

在SomeList组件本身中是否有另一种“接受”的方法来做到这一点？如果是的话，优点和缺点是什么？

我还将此技术(成功地)用于svg元素，因此上述问题也适用于：

class SmallCircle extends React.Component {
  render = () => {
    return(
      <circle cx={this.props.scx} cy={this.props.scy} r="5" 
        stroke="blue" fill="dodgerblue" strokeWidth="2"/>)
  }
}


class SomeSvg extends React.Component {

  randomCoords = (n, domain) => {
    let xs = [...Array(n).keys()].map(i=> {
      return {
        "i": i,
        "x": Math.floor(Math.random() * domain + 1).toString(),
        "y": Math.floor(Math.random() * domain + 1).toString()
      }
    })
    return(xs)
  }

  render = () => {
    var svgcoords = this.randomCoords(5000, 700);
    var thecircles = svgcoords.map(xy => <SmallCircle key={xy.i.toString() + xy.x.toString() + xy.y.toString()} 
        scx={xy.x} scy={xy.y} />);
    return(
      <svg width="700" height="700">
        {thecircles}
        <circle cx="1" cy="1" r="100" stroke="orange" strokeWidth="7" fill="grey" />
        <circle cx="700" cy="700" r="100" stroke="green" strokeWidth="7" fill="grey" />
        <circle cx="1" cy="700" r="100" stroke="red" strokeWidth="7" fill="grey" />
        <circle cx="700" cy="1" r="100" stroke="blue" strokeWidth="7" fill="grey" />
        <SmallCircle scx="200" scy="200" />
      </svg>
    )
  }
}

所以基本上我的问题是，React是否要求您一直将分层组件结构“展开”(即扁平)成多个细粒度的顶级组件？

这是输出，顺便说一句：

​

​

编辑:我意识到我没有为每个选择条目包括一个“键”，它在控制台中抱怨，但问题并不受此影响。

Answer 1

不，反应并不要求你那样做。如果你愿意，你可以把你所有的反应代码放在一个巨大的组件中。

那为什么不这么做呢？实际上有很多原因:可读性、可重用性、可测试性、可维护性等。

意思:当您需要某些逻辑来独立的时候，您可以创建独立的组件。在您的问题中，您将ListEntry作为单独的组件。为什么？如果您不在代码中的任何其他地方使用该组件，则可以将该逻辑放入SomeList中，如果您愿意的话。

我认为你问题的关键是:如果你不使用React.Component的任何逻辑，你就不需要继承它。基本的‘无状态组件’可以编写成一个函数：

function MyComponent(props) {
    (...some logic...)
    return <option>{ props.value }</option>;
}

或者，相当于ES6：

const MyComponent = props => { 
    (...some logic...)
    return <option>{ props.value }</option>;
}

或者，如果在呈现中根本不需要任何逻辑：

const MyComponent = props => <option>{ props.value }</option>;

因此，您只需在组件render (或无状态组件的函数体)中定义此函数，如下所示：

class SomeList extends Component {
    render() {
        const ListEntry = props => <option>{ props.value }</option>;
        return (
            <select>
                { [...Array(10).keys()].map(x => (
                    <ListEntry key={x} value={Math.random()} />
                ))}
                <ListEntry value="basic" />
                <ListEntry value="another" />
            </select>
        );
    }
}

在这里，我们的ListEntry组件的代码定义在SomeList组件的呈现中。(免责声明:我不认为render是最好的地方，它只是为了说明这一点)。不过，我并不认为这样做有什么意义。既然ListEntry不包含任何逻辑，为什么不直接使用<option>而不是ListEntry呢？它可以很简单，如：

const SomeList = () => {
    return (
        <select>
            { [...Array(10).keys()].map(index => (
                <option key={index}>{ Math.random() }</option>
            ))}
            <option>Basic</option>
            <option>Another</option>
        </select>
    );
};

至于您的SVG示例:如果您使用上面的内容并为您需要的组件创建函数，则可以这样编写它：

const SomeSvg = () => {
    const SmallCircle = props => (
        <circle {...props} r="5" stroke="blue" fill="dodgerblue" strokeWidth="2" />
    );

    const BigCircle = props => (
        <circle {...props} r="100" strokeWidth="7" fill="grey" />
    );

    const randomCoords = (n, domain) => [...Array(n).keys()].map(() => ({
        x: Math.floor(Math.random() * domain + 1),
        y: Math.floor(Math.random() * domain + 1)
    }));

    return (
        <svg width="700" height="700">
            { randomCoords(5000, 700).map((xy, i) => <SmallCircle key={i} cx={xy.x} cy={xy.y} />) }
            <BigCircle cx="1" cy="1" stroke="orange" />
            <BigCircle cx="700" cy="700" stroke="green" />
            <BigCircle cx="1" cy="700" stroke="red" />
            <BigCircle cx="700" cy="1" stroke="blue" />
            <SmallCircle cx="200" cy="200" />
        </svg>
    );
};

Answer 2

React对组件结构应该有多少粒度没有任何意见。它可能是一个有一些道具或多个组件的组件。

因此，可以如下所示。

class Select extends Component {
  render() {
    return (
      <select>
        <option value="">Select...</option>
        {this.props.options.map(option =>
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        )}
      </select>
    );
  }
}

您可以简单地以option的形式提供一个option数组，它将很好地工作。

var options = [
  { value: 'one', text: 'One' },
  { value: 'two', text: 'Two' }
];

<Select options={options} />

现在，假设我们有了一个新的要求，根据一些标准突出显示应用程序的一个选择组件的一些选项。我们这里没有什么选择。

最简单的选择是编写另一个具有突出显示逻辑的类似组件。但这将重复我们的大部分代码，并使其难以维护。

另一种选择是传递一个附加的支柱，并基于该支柱有条件地启用突出显示逻辑。再说一遍，这是不可伸缩的。当我们得到几个这样的新需求时，将很难维护组件的代码并理解它的接口。

但是，如果我们基于多个可组合组件来制作组件，那么很容易根据不同的需求定制您的组件。在这种情况下，我们可以在highlight组件中引入一个Option支柱，并根据标准有条件地传递这个支柱。

class Option extends Component {
  render() {
    return (
      <option
        value={this.props.value}
        className={this.prop.highlight ? "highlight" : ""}
      >
        {this.props.text}
      </option>
    );
  }
}

class Select extends Component {
  render() {
    return (
      <select className="my-select">
        {this.props.children} // render children of Select tag
      </select>
    );
  }
}

class HighLightingSelect extends Component {
  render() {
    return (
      <Select>
        {this.props.options((option, index) =>
          <Option key={option.value} value={option.value} highlight={index % 2}>
            {option.text}
          </Option>
        )}
      </Select>
    );
  }
}

这里的想法是，完全由您来决定组件结构中需要多少粒度。它可以是一个或十几个组件，需要组合在一起才能得到预期的结果。

如果您使它变得更细粒度，那么在不同的情况下可以很容易地定制和重用您的代码。特别是，为了代码重用，应促进组合重于继承。因此，粒度是反应中可重用性的关键。

但是，拥有多个组件将使您很难在简单的场景中理解和使用您的组件。