reactjs - 我是否*必须*展平 React.JS 中的所有分层组件声明？

Question

我想知道在 React 中创建动态选择组件的规范方法是什么。我是否必须创建一个单独的组件来根据下面的代码返回选项，以便能够通过每个条目的 props 自定义值，然后将它们包含到单独的选择组件中？ p>

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

不，React 并不要求您这样做。如果您愿意，您可以将所有 React 代码放入 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>
    );
};