Question

我正面临一个React组件的问题，我想在一个案例中使用某个道具而在另一个案例中使用另一个道具。让我告诉你我的意思。

class GizmoComponent extends React.Component {
    render() {
        return (
            {
                this.props.SomeBoolean
                ?
                <WidgetColumn {...this.props} field1={this.props.field2}/>
                :
                <WidgetColumn {...this.props} field1={this.props.field1}/> {/* field1 is already in the props but I'm being explicit */}
            }
        );
    }
}

class WidgetColumn extends React.Component {
    render() {
        return (
            {
                this.props.field1.subfield
                ?
                <div>{/* Extensive use of this.props.field1 throughout this component*/}</div>
                : 
                <div></div>
            }
        );
    }
}

基本上，我要做的是因为WidgetColumn广泛使用this.props.field1，我想用field2替换数据的获取。其他一切都是一样的。只需获取某个案例中不同项目的数据：SomeBoolean。

但是，我在this.props.field1.subfield上收到错误，指出this.props.field1未定义，因此我无法获得未定义的subfield内容。只有在我将<WidgetColumn {...this.props} field1={this.props.field2}/>行添加到代码中时才会出现这种情况。

为什么它未定义，因为我正在定义它在道具中的含义？

Answer 1

首先，确保SomeBoolean和field1.subfield / field2.subfield属性正确传递。

我的推荐是：在将参数传递给WidgetColumn时，尽量不要spread props object {...this.props}。

据我了解GizmoComponent有field1和field2道具：

GizmoComponent.propTypes = {
  field1: PropTypes.object
  field2: PropTypes.object
}

因此，当您将GizmoComponent道具传播到另一个组件时，如：

// NOTE: there are this.props.field1 and this.props.field2 are available
<WidgetColumn {...this.props} />

结果与您写的相同：

<WidgetColumn field1={this.props.field1} field2={this.props.field2} />

您可能存在冲突，并且传播对象会重写您手动定义的道具的值。尝试在下一个方向传递字段属性：

＆＃13;

class WidgetColumn extends React.Component {
    render() {
        return this.props.field.subfield
            ? <div>The field is subfield</div>
            : <div>The field is NOT subfield</div>
    }
}

class GizmoComponent extends React.Component {
    render() {
        return this.props.SomeBoolean
            ? <WidgetColumn field={this.props.field2} />
            : <WidgetColumn field={this.props.field1} />
    }
}

class Example extends React.Component {
  render() {
    return (
      <p>
        <GizmoComponent field1={{ subfield: true }} field2={{ subfield: false }} SomeBoolean={true} />
        
        <GizmoComponent field1={{ subfield: true }} field2={{ subfield: false }} SomeBoolean={false} />
      </p>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

Answer 2

您必须在渲染组件时声明属性。像

<WidgetColumn props={this.props} field1={this.props.field2}/>

如果您使用此功能，则可以访问子组件中父组件的所有道具。

那就是它。

加载相同的组件

2 个答案: