Question

我正在尝试构建一个通用的React select组件，以显示标记为传递给该组件的选项的列表。我的问题是，我希望能够指定在打印记录时使用的属性，而记录将不会总是相同的。例如，如果我传递一个作者数组，则可以使用full_name属性填充列表；但是，如果要打印书籍列表，则要使用书名。

我有一个调用选项的函数来填充如下所示的选择：

options = () => {
  return this.props.collection.map(o => {
    return ( 
      <option key={o.id} value={o.id}>/*DISPLAY METHOD HERE*/</option>
    )
  })
}

基本上，我希望能够将prop传递给指定我要使用的属性的组件（full_name，title等），并在其中调用o（o.full_name，o.title等）。回电话。这可能吗？

Answer 1

不确定我是否完全理解您的问题，但是如果您尝试访问对象的任意方法，则在JS中与访问任意属性相同。

因此，您可以使用属性通过字符串访问该方法。例如您的标题：

    const Foo = (o, title) => {
      return o[title]();
    }

    Foo({ Fantastic: () => console.log('Four'), }, 'Fantastic');

“ o [title]”会为您提供方法，而“（）”会调用它

Answer 2

const SelectPicker = ({ data }) => (
    <select>
      {Object.keys(data).map(key => (
        <option value={key}>{data[key]}</option>
      ))}
    </select>
  );

function App() {
  var obj = {
    userOne: "John Doe",
    userTwo: "John Smith"
  };
  return (
    <div className="App">
      <SelectPicker data={obj} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

您可能会寻找类似的东西吗？

在通用React组件中指定属性

2 个答案: