如何在无状态函数中修改 jsx innerText？答案

【问题标题】：How can I modify the jsx innerText in a statelesss function?如何在无状态函数中修改 jsx innerText？
【发布时间】：2018-12-31 23:12:30
【问题描述】：

如何从另一个函数编辑 func 中的段落？

const func = ({ onChange, onDeselect }) => (
  <div>
  <p>Edit this</p>
  </div>
);

【问题讨论】：

标签： reactjs function stateless innertext

【解决方案1】：

添加另一个道具：

const func = ({ onChange, onDeselect, copy }) => (
  <div>
    <p>{copy}</p>
  </div>
);

【讨论】：

谢谢！！我是 React 的新手，但我仍然觉得它令人困惑。你能告诉我如何让函数返回作为道具传递吗？
例如：function func2() { return
这应该是passes
; }，所以这应该是通过出现在段落中的吗？
不知道是不是你的意思：jsfiddle.net/ypzcne51/1<Foo copy={<Bar />} />

【解决方案2】：

我希望 contentProp 成为内容，但我正在导出这个组件，因此渲染在另一个文件中。

let content = <SearchContent />;
function renderTabContent({ getTabContentProps, value }) {
  const SampleTab = SampleTabs[value];
  content = <SampleTab {...getTabContentProps()} />;
}
renderTabContent.propTypes = {
  getTabContentProps: PropTypes.func,
  value: PropTypes.string
};

const TabsApp = ({ onChange, onDeselect, contentProp }) => (
  <div>
    <AppHeader
      data-testod="hearder"
      position="static"
      renderNav={({ getNavProps }) => (
        <div {...getNavProps({})} >
          <Tabs
            centered
            noBorder
            defaultValue={Search}
            displayName={'centeredExample'}
            onChange={onChange}
            onDeselect={onDeselect}
            render={({ getTabProps }) => <Tab {...getTabProps()} />}
            renderTabContent={renderTabContent}
            tabs={[Search, Add, Update]}
          />
        </div>
      )}
    />
    <div>{contentProp}</div>
  </div>
);

TabsApp.propTypes = {
  onChange: PropTypes.func,
  onDeselect: PropTypes.func,
  contentProp: PropTypes.element
};

【讨论】：

这应该是passes