React：將組件存儲在對象中

Question

我的用戶配置文件中有幾十個字段，我正在嘗試構建一種在適當的輸入表單組件中顯示它們的有效方法。

例如，個人資料可能如下所示：

profile1={
  name: 'Cornelius Talmadge',
  phone: '1'
}

如果我可以像這樣堆疊組件......

export const FieldCatalogue = {
  name: <TextField defaultValue={this.state.userProfile.name} label={"Name"} />
}

...然后我可以做這樣的事情：

for (let field in Object.keys(profile1)) {
  return FieldCatalogue[field]
}

這將是非常酷的。

如果我的輸入組件都是通過正常語法構建的（例如， Component = React.createClass({..}) ）， 這個問題有一個很好的答案，但是：

一種。 這是很多樣板

灣我必須向每個人傳遞大量道具，這不是最佳選擇

對我來說，完美的情況基本上是將輸入組件幾乎作為字符串傳遞，這樣它們就落入了它們被渲染的任何父組件的范圍（狀態、道具等）。

這是可能的和/或可取的嗎？

Answer 1

對我來說，完美的情況基本上是將輸入組件幾乎作為字符串傳遞，這樣它們就落入了它們被渲染的任何父組件的范圍（狀態、道具等）。

這是可能的和/或可取的嗎？

是的，這實際上是可能的！ 不，我不認為這是我真正會使用的東西。 但它有效，而且看起來有點酷。 在我的示例中，FieldCatalogue 組件顯然沒有自己單獨的this.state對象，但是通過將它們綁定到父組件this它們會自動繼承正確的上下文。

請注意，如果組件被定義為箭頭函數，則該示例將不起作用，因為箭頭函數從不擁有this對象。

哦， <Tmp key={i} />就在那里，因為我們需要在循環數組時為 React 提供某種標識符。

我不得不嘗試將此作為練習，這非常簡潔：

https://jsfiddle.net/dannyjolie/e9s09xrm/

const FieldCatalogue = {
  name: function() {
    return <input defaultValue = {this.state.userProfile.name} label = {"Name"}/>;
  },
  age: function() {
    return <input defaultValue = {this.state.userProfile.age}/>;
  }
}
const App = React.createClass({
  getInitialState: function() {
    return {
      userProfile: {
        name: 'Name in parent state',
        age: 'Age in parent state'
      }
    };
  },
  render: function() {
    let content = Object.keys(FieldCatalogue).map((objkey, i) => {
      let Tmp = FieldCatalogue[objkey].bind(this)
      return <Tmp key = {i} />;
    });
    return <div>{content}</div>);
  }
});

通過這種方式，父組件的this上下文被傳遞給 FieldCatalogue 組件，它就可以正常工作。 真的不確定這是否是一件好事。

Answer 2

您可以映射用戶對象鍵並將它們與fieldCatalogue相應組件fieldCatalogue 。 如果鍵存在，則在該鍵處渲染組件並傳入所有父組件道具：

代碼筆

const fieldCatalogue = { // stateless component functions rather than React element literals
  name(props) {
    return <div>Name: {props.value}</div>
  },

  age(props) {
    return <div>Age: {props.value}</div>
  }
};

class ProfileFields extends React.Component {
  render() {
    const {userProfile} = this.props;
    return (
      <div>
        {Object.keys(userProfile).map((key) => {
          if(fieldCatalogue.hasOwnProperty(key)) {
            const FieldComponent = fieldCatalogue[key];
            return (<FieldComponent {...this.props} value={userProfile[key]}/>);
          } else {
            return null;
          }
        })}
      </div>
    );
  }
}

或者，您的字段組件可以通過返回null處理未定義的值。 然后你可以渲染所有這些，只有存在於用戶對象上的才會被渲染。